JavaScript Technical Questions Flashcards

1
Q

What is the easiest way to empty an array in JavaScript?

A

The easiest way to achieve this is to set the array’s length to be 0:

let array = [ 'a', 'b', 'c', 'd' ];
console.log(array);  // [ 'a', 'b', 'c', 'd' ];
array.length = 0;
console.log(array1);  // [ ]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are Props in React?

A

Props (or Properties) in React are used to transfer data from one component to the next (parent component to child component).
* They are typically used to render dynamically generated data.
* A child component can never send props to a parent component since this flow is unidirectional (parent to child).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a Class Component in React?

A

Class Components are ES6 classes that read props and state, and return JSX. These require the use of React extensions. It uses a render() function to return the HTML that will be displayed in the component.

import React, {Component} from 'react';

export default class App extends Component {
    render() {
        return ()
    }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is State in React?

A

A built-in React Object that is used to create and manage data within components. It is different from props because it is used to store data rather than pass data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is a Component in React?

A

A self-contained, reusable code block that divides the user interface into smaller pieces (as opposed to building the entire UI in a single file).
* There are Class Components and Functional Components, but it is recommended to use Functional Components whenever possible.
* In React, rendering logic and markup (JSX) live together within a component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is state in JavaScript?

A

State describes the status of the entire program (global state) or an individual object (local state).
* It could be text, a number, a boolean, or another data type.
* It’s a common tool for coordinating code. For example, once you update state, a bunch of different functions can instantly react to that change.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is a Functional Component in React? (and write a quick example)

A

Functional Components (recommended) are ES6 functions that return a React element (JSX). They allow states to be used inside them (vs. Class Components, which do not). They take arguments and props, and return JSX

import React from 'react';

const App = (props) => {
    return <h1>Hello, {props.name}</h1>;
}
export default App;

OR

function App(props) {
    return <h1>Hello, {props.name}</h1>;
}
export default App;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?

A

Template literals allow for string interpolation without the need for concatenating different parts of the string with the addition operator. This allows for easier to write (and read) syntax

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is a JavaScript Promise?

A

A Promise in JavaScript is an object that represents the eventual completion or failure of an async operation.
* It is basically a returned object to which you attach callbacks, instead of passing callbacks into a function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What’s the difference between ES5 and ES6?

A

Several key differences include:
* Variable declarations (let or const, instead of var)
* Arrow functions
* Template literals for string interpolation
* Default parameter values
* Spread operator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is JSX in React?

A

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. This allows rendering logic to be kept with the “HTML” it is rendering within a component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is an interface in TypeScript?

A

In TypeScript, an interface is used to describe the shape of an object, and can be extended by other interfaces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is functional programming?

A
  • A style of programming that emphasizes the evaluation of expressions, rather than an execution of commands.
  • It is a declarative paradigm, and its functions use expressions to map values to other values (vs. a sequence of imperative statements that update the state of the program)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What does Array.reduce() do?

A
  • Performs some operation on all elements of an array and returns a single value as a result.
  • Takes a callback function that we pass 2 arguments to (an accumulator, and a current value), and takes an optional 2nd argument as the first value of the accumulator.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does Array.filter() do?

A
  • Takes an array and returns a new array with only the values that meet certain criteria.
  • Often used to select a subset of data from an array.
  • It does not mutate the original array.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What does Array.map() do?

A
  • Takes an array of values and applies a transformation to each value in the array.
  • It returns a new array with those transformed values (it does not mutate the original array)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are Higher-Order Functions?

A

Functions that take one or more functions as arguments, or return a function as their result

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is declarative programming?

A

Focuses on what desired outcome should be, by abstracting away the control flow or logic.

Pros: Shorter, easier-to-read code, works well for JS frameworks/libraries
Cons: Sometimes not as performant as imperative code

const doubleMapImperative = numbers => numbers.map(n => n * 2);

19
Q

What is imperative programming?

A

Focuses on an explicit sequence of commands to describe how a program should operate.

Pros: Allows more control over code in blocks, easier to understand
Cons: Longer code, harder to read

const doubleMapImperative = numbers => {
      const doubled = [ ];
      for (let i = 0; i < numbers.length; i ++) {
             doubled.push(numbers[i] * 2);
       }
       return doubled;
}
20
Q

What are closures in JavaScript?

A
  • A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
  • In other words, a closure gives you access to an outer function’s scope from an inner function.
  • In JavaScript, closures are created every time a function is created, at function creation time.
21
Q

What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

A

Explanation:
* null is the intentional absence of a value, and is one of the primitive values of JavaScript.
* undefined means the value does not exist in the compiler, and is a global object.
* undeclared variables have not yet been declared using the var or const keywords

Use:
* When we define a variable to undefined then we are trying to convey that the variable does not exist.
* When we define a variable to null then we are trying to convey that the variable is empty.

22
Q

What is a CLI? Have you used the CLI and in what ways?

A
  • A CLI is a Command Line Interface (otherwise known as “the terminal”).
  • I use the CLI almost exclusively when programming, to manage my file structure, navigate between various repos and files, etc.
23
Q

How do you do version control with Git/GitHub?

A

Git is a version control system that allows for precise management of changes between versions of programming files. By using Git, multiple programmers can collaborate more easily to develop source code during software development.

GitHub is one of the more popular online software programs for working with Git. It provides version control, bug tracking, task management, CI/CD, etc.

24
Q

What is middleware and how does it work?

A

Middleware is software that lies between the OS and the applications running on it, enabling communication and data management.
* It acts as the “glue” that brings assorted applications together without the need to write complex custom modules all the time.
* Examples: Router-level, error-handling.
* Middleware is a linked-list, and each node in the list needs to complete before the next node is run.

25
Q

Describe the difference between a function declaration and a function expression

A

A function declaration (or function statement) defines the function with the specified parameters
A function expression is a declaration of a function within an expression, in which the function name can be omitted (making it an anonymous function). One key difference is that function expressions are not hoisted, while function declarations are

26
Q

What is Hoisting in JavaScript?

A

Hoisting is when the interpreter moves a function declaration (or variable or class declaration) to the top of its scope before the code actually executes. This allows functions to be used in code before they are declared.

27
Q

Describe OOP (Object Oriented Programming) including how prototype chains work

A

Object Oriented Programming is the idea of modeling a system as a collection of objects, which contain both functions (or methods) and data. In OOP, you could have a class that represents a certain type of object. Then you can create instances of that class by passing values to its constructor.

In JavaScript, every object has a built-in property called its prototype. The prototype is itself an object, so it will have its own prototype, creating a prototype chain. The chain ends when we reach a prototype whose prototype property points to null.

28
Q

How could you create new instances of an object?

A

This can be achieved by creating a class object. A new instance of that class can be created by calling it with the keyword “new” before it and passing it any necessary information in order for the constructor function to build a new instance of that object. The result can be captured in a new variable, whose value is now the new instance of that class object

29
Q

What is Node.js?

A

A development platform that allows JavaScript to be executed on the server side. It is non-blocking, which is one of its advantages

30
Q

What does the keyword this belong to in OOP?

A

It refers to the current object (the object whose constructor or method is being called)

31
Q

What does JavaScript’s JSON object do to JSON data and what does it convert a JavaScript object into?

A

The JSON object is an object that contains methods for parsing JSON data and converting values to JSON.
The JSON object will take a JSON string and convert it into a JavaScript object using JSON.parse(). It will also take a JavaScript object and convert it into JSON using JSON.stringify()

32
Q

Explain Node’s event loop

A

The event loop in Node.js is basically a loop that receives calls and executes them in the order in which they are received. In cases where a call is received that is intentionally delayed (for instance, with a setTimeout) the callback function of that function call is sent to the “message queue”. When the delayed function is resolved in the call stack, the call stack will pull the callback from the message queue and execute it

33
Q

What is AJAX?

A

AJAX (Asynchronous JavaScript And XML) is a technique for accessing web servers from a web page

34
Q

What is Redux?

A

A centralized place to contain global state in an application, and specific patterns to follow when updating that state to make the code predictable

35
Q

What is Semantic HTML?

A

HTML elements that clearly describe their meaning to the browser and the developer. Examples:
~~~

<article>
<header>
<table>
<form>
~~~
</form></table></header></article>

36
Q

What is the BEM Methodology for CSS?

A

BEM (Blocks - Elements - Modifiers) is a method of organizing CSS styles to create more structure and prevent confusion
* Block: standalone entity that is meaningful on its own (header, container, menu)
* Element: part of a block that has no standalone meaning and is semantically tied to its block (menu item, list item, header title)
* Modifier: a flag on a block or element, used to change appearance or behavior (disabled, highlighted, color yellow)

in HTML:
~~~
<section className="planet-info">
<div className="planet-info\_\_planet-data">
<div className="planet-info\_\_container">
<div className="planet-info\_\_title">Planet Size (Diameter)</div>
<div className="planet-info\_\_data">{distance} miles</div>
</div>
</div>
</section>
~~~

corresponding CSS:
~~~
.planet-info {
&__planet-data {
}
&__planet-container {
}
&__title {
}
&__data {
}
}
~~~

37
Q

What is the Browser Object Model (BOM)?

A

The Browser Object Model (BOM) allows JavaScript to talk to the browser. Within it, the window object represents a browser’s window, and all JavaScript objects, functions, and variables become members of this window object
Global variables are properties of the window object
Global functions are methods of the window object

38
Q

What is the Document Object Model (DOM)?

A

The **Document Object Model (DOM) ** is a representation of the objects that comprise the structure and content of a web document, as a tree data structure. This representation allows a scripting language (such as JavaScript) to change the structure, style, and content of that document.

39
Q

What are Global JavaScript Objects?

A

Global JavaScript Objects are objects that always exist in the global scope. In JavaScript, a global object is always defined–but that object’s interface depends on the execution context. For example: In a browser, the Window is the global object, while scripts running under Node.js have an object called global as their global object.

40
Q

When a user interacts with the HTML on a web page, there are three steps involved in getting it to trigger the JavaScript code. Together these steps are event handling. Describe these three steps.

A
  1. capture phase - event “trickles down” to the element that caused the event
  2. target phase - when event reaches and captures the target element
  3. bubble phase - event is “bubbled up” to the DOM tree, eventually reaching the higher levels of the DOM tree
41
Q

What’s the difference between a Binary Tree and a Binary Search Tree?

A

Binary Tree - a non-linear data structure where each node can have a maximum of 2 child nodes (left child and right child)

Binary Search Tree - a binary tree in which the left subtree of each node contains only nodes with values that are lower, and the right subtree contains only nodes with values that are higher

42
Q

What’s the benefit of using the arrow syntax for a method in a constructor function?

A

Using arrow syntax for a method within a constructor will set the value of this at the time the function is created, and it can’t be changed after that - so it will always refer to the new object created by the constructor when first called

43
Q

When should fat arrow functions NOT be used in ES6?

A
  1. as Object methods (because this is not bound to anything, so will inherit the value of this from its parent scope)
  2. as callback functions with dynamic context (again, because this is bound to the parent scope, not to the element calling the function)
  3. when it makes code less readable
44
Q

When do fat arrow functions work best in ES6?

A
  1. when used as functions that require this to be bound to the context instead of the function itself
  2. fat arrow functions are also usually shorter and easier to read in most cases