JavaScript

Question 1

Web APIs

aka Browser APIs

Answer 1

APIs that are built into browser

e.g. fetch, setTimeout

Question 2

??

nullish coalescing operator

Answer 2

const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

useful if left-side value is 0 and we want to use that value

Question 3

Two types of Execution Context

Answer 3

1. Global - created when a JavaScript script first starts to run, and it represents the global scope in JavaScript.
2. Function - created whenever a function is called, representing the function’s local scope

Question 4

Two phases of the Execution Context

Answer 4

1. Creation phase: the JavaScript engine creates the execution context and sets up the script’s environment. It determines the values of variables and functions and sets up the scope chain for the execution context.
2. Execution phase: In this phase, the JavaScript engine executes the code in the execution context. It processes any statements or expressions in the script and evaluates any function calls.

Question 5

Two parts of Execution Context

Answer 5

1. Thread of execution
2. Memory

Question 6

JS Call Stack

Answer 6

• In a JS call stack, the elements are function invocations. Every time you invoke a function, it’s added to the stack. If it has a nested function, that nested function will get added to the top of the stack as well, and so on.
• responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.
• You can think of the call stack as a to-do list of sorts for JavaScript.

LIFO

Question 7

JS Event Loop

Answer 7

constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

Question 8

JS Microtask Queue

Answer 8

* Queue for cb funcs from promises
* Higher Priority than Callback Queue
* Microtask Queue is like the Callback Queue, but Microtask Queue has higher priority. All the callback functions coming through Promises and Mutation Observer will go inside the Microtask Queue. For example, in the case of fetch(), the callback function gets to the Microtask Queue. Promise handling always has higher priority so the JavaScript engine executes all the tasks from Microtask Queue and then moves to the Callback Queue.

Question 9

What is Scope in JS

Answer 9

determines what variables you have access to

• Block scope
• Function scope
• Global scope

Question 10

JS dot notation vs bracket notation

Answer 10

Bracket notation, unlike dot notation, can be used with variables.
~~~
const myObj = {}
const newNumKeyToAdd = 13
myObj[newNumKeyToAdd] = 1

// {13: 1}
~~~
you cant do that with dot notation

Question 11

Set

JS

Answer 11

• lets you store unique values of any type
• A value in the set may only occur once

const mySet1 = new Set()
mySet1.add(1)
mySet1.add(5)
mySet1.add(5)

mySet1.size; // 2
mySet1.has(1); // true

mySet1.delete(5); // removes 5 from the set

Question 12

Scope vs. Context

JS

Answer 12

• scope is function-based (access to variables)
• context is object-based (value of this)

Question 13

Javascript runtime environment

Answer 13

• where your javascript code is executed when you run it.

JavaScript code may be executed in one of two runtime environments:
1. a browser’s runtime environment
2. the Node runtime environment

Examples of what JS Engines are used in different runtime environments:
* Chrome: V8
* node: V8
* Mozilla: Spidermonkey
* IE: Chakra

Question 14

V8

Answer 14

Google’s JS & WebAssembly engine

• Open Source, written in C++
• Used in Chrome and Node.js

Question 15

Event bubbling

Answer 15

when an element receives an event (e.g. click, scroll, etc…), and that event bubbles up (aka transmitted/propagated) to its parent and ancestor elements in the DOM tree until it gets to the root element.

Question 16

Event delegation

Answer 16

• an event-handling pattern (based on event bubbling) that allows you to handle events at a higher level in the DOM tree other than the level where the event was first received.

Question 17

Event capturing

Answer 17

• event propagates from the outermost element to the target element.
• opposite of event bubbling, where events propagate outwards from the target to the outer elements.

Question 18

3 phases of Event Propogation

Answer 18

1. Capture phase - the event starts from Window and moves down to Document, the root element and through ancestors of the target element.
2. Target phase, the event gets triggered on the event target (e.g. the button the user clicked).
3. Bubble phase, the event bubbles up through ancestors of the target element until the root element, Document and, finally, Window.

Question 19

Explain how this works

Answer 19

Case 1: Default - In a regular function (or if you’re not in a function at all), this points to window. This is the default case.
Case 2: Left of the dot - When a function is called as a method, this points to the object that’s on the left side of the dot.
Case 3: Constructor - In a function that’s being called as a constructor, this points to the object that the constructor is creating.
Case 4: Explicitly set - When you explicitly set the value of this manually using bind, apply, or call, it’s all up to you.
Case 5: Callback - In a callback function, apply the above rules methodically.

Question 20

ES6 Template Literals

Answer 20

`Welcome ${firstName}, ${lastName}!`

Question 21

bind()

Answer 21

returns a new function that when invoked, has its this set to a specific value

Question 22

call()

Answer 22

functionName.call(thisArg, arg1, arg2, ...);

calls a function with this explicitly set

Question 23

apply()

Answer 23

fn.apply(thisArg, [args]);

same as call() except it takes the args as an array

Question 24

prototype chain / prototypal inheritance

JS

Answer 24

Every object in JavaScript has a built-in property, which is called its prototype.

The prototype is itself an object, so the prototype will have its own prototype, making what’s called a prototype chain.

The chain ends when we reach a prototype that has null for its own prototype.

prototypal inheritance - When we read a property from an object, and it’s missing, JavaScript will check if the prototype has that property and use it if it does

Question 25

generator

JS

Answer 25

a process that can be paused and resumed and can yield multiple values.

A generator in JavaScript consists of a generator function, which returns an iterable Generator object.

// Generator function declaration
function* generatorFunction() {}

https://www.digitalocean.com/community/tutorials/understanding-generators-in-javascript

Question 26

Iteration protocols

Answer 26

There are two iteration protocols:
1. iterator protocol
2. iterable protocol

Question 27

Iterable protocol

Answer 27

allows JS objects to define or customize their iteration behavior, such as what values are looped over in a for…of construct. Some built-in types are built-in iterables with a default iteration behavior, such as Array or Map, while other types (such as Object) are not.

In order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant Symbol.iterator:

Question 28

Iterator

Answer 28

• Any object that implements the “Iterator Protocol”,
• aka –> it has a next() method that returns an object with two properties:
  1. done: (Bool)
  2. value: the current element.

Question 29

Explain the difference between cookies, session storage, and local storage?

Answer 29

JavaScript provides three mechanisms for storing data on the client − cookies, session storage, and local storage. Each one has advantages and disadvantages.

1. Local storage is the most recent mechanism. It allows for larger amounts of data to be stored, but the data is not deleted when the browser is closed. Local storage is useful for storing data that the user will need to access later, such as offline data.
2. Session storage is similar to cookies, but the data is only stored for the current session. This means that the data will be deleted when the user closes the browser. Session storage is useful for storing data that is sensitive, such as login credentials.
3. Cookies are the oldest and most well-known mechanism. They are simple to use and well supported by browsers. However, they are limited to 4KB of data and are often used to store data that is not sensitive, such as user preferences.

Question 30

Does an empty array in JS evaluate to truthy or falsy?

Answer 30

truthy

Question 31

Pure Function

Answer 31

Same inputs always return same outputs

No side-effects

Question 32

null vs undefined vs undeclared

Answer 32

null - when var is intentinionally set to have no value

undefined - when var has not been assigned any value

undeclared - when var has not been declared (const, let, var)

Question 33

Double equals vs triple equals

Answer 33

Double Equals (==) checks for value equality only. It does type coercion. This means that before checking the values, it converts the types of the variables to match each other.

Question 34

Closure

Answer 34

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.

Will Sentance - Closure is the “backpack” that the function carries on its back that has additional details (variables from the outer function at the time of function creation)

Its stored as a hidden property on the function - you can see closure in Chrome Dev tools debugger as well as console.dir(myFunc)

Question 35

What’s the difference between host objects and native objects?

Answer 35

native javascript objects: standard javascript objects which are provided by javascript itself.

Host javascript objects: environment-specific javascript objects, and may vary as per the environment of the machine in which the javascript is being used. Objects provided by one environment, may or may not be present in another environment. For example, most browsers provide window objects or navigator objects, but these objects are not present in the server running node.js.
However, some objects like consoles are provided by both, the browsers and the node.js servers. Therefore, we can say that the host objects are host specific and may differ from one host (environment) to other.

Question 36

Variable hoisting

Answer 36

var-declared variables are hoisted, meaning you can refer to the variable anywhere in its scope, even if its declaration isn’t reached yet.

console.log(x === undefined); // true
var x = 3;

(function () {
  console.log(x); // undefined
  var x = "local value";
})();

Whether let and const are hoisted is a matter of definition debate. Referencing the variable in the block before the variable declaration always results in a ReferenceError, because the variable is in a “temporal dead zone” from the start of the block until the declaration is processed.

Question 37

Temporal dead zone (TDZ)

Answer 37

A let or const variable is said to be in a “temporal dead zone” (TDZ) from the start of the block until code execution reaches the line where the variable is declared and initialized.

While inside the TDZ, the variable has not been initialized with a value, and any attempt to access it will result in a ReferenceError. The variable is initialized with a value when execution reaches the line of code where it was declared. If no initial value was specified with the variable declaration, it will be initialized with a value of undefined.

This differs from var variables, which will return a value of undefined if they are accessed before they are declared.

The code below demonstrates the different result when let and var are accessed in code before the line in which they are declared:

{
  // TDZ starts at beginning of scope
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2; // End of TDZ (for foo)
}

Question 38

Function Hoisting

Answer 38

Consider the example below:

console.log(square(5)); // 25

function square(n) {
  return n * n;
}

This code runs without any error, despite the square() function being called before it’s declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to:

// All function declarations are effectively at the top of the scope
function square(n) {
  return n * n;
}

console.log(square(5)); // 25

Function hoisting only works with function declarations — not with function expressions. The code below will not work.

console.log(square); // ReferenceError: Cannot access 'square' before initialization
const square = function (n) {
  return n * n;
};

Question 39

Class declaration hoisting

Answer 39

Unlike function declarations, class declarations are not hoisted (or, in some interpretations, hoisted but with the temporal dead zone restriction), which means you cannot use a class before it is declared.

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {}

This behavior is similar to variables declared with let and const.

Question 40

Why is extending built-in JavaScript objects not a good idea?

Answer 40

Extending a built-in/native JavaScript object means adding properties/functions to its prototype. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the Array.prototype by adding the same contains method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.

The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user’s browser due to it being an older browser.

Question 41

Explain the same-origin policy with regards to JavaScript.

Answer 41

The same-origin policy prevents JavaScript from making requests across domain boundaries.

An origin is defined as a combination of URI scheme, hostname, and port number.

This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model.

Question 42

What is “use strict”;? What are the advantages and disadvantages to using it?

Answer 42

‘use strict’ is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.

Advantages:
* Makes it impossible to accidentally create global variables.
* Makes assignments which would otherwise silently fail to throw an exception.
* Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).
* Requires that function parameter names be unique.
* this is undefined in the global context.
* It catches some common coding bloopers, throwing exceptions.
* It disables features that are confusing or poorly thought out.

Disadvantages:
* Many missing features that some developers might be used to.
* No more access to function.caller and function.arguments.
* Concatenation of scripts written in different strict modes might cause issues.

Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.

Question 43

What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

Answer 43

Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript.

Advantages:
* Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
* Static types are very useful (in the case of TypeScript) for large projects that need to be maintained over time

Disadvantages:
* Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
* Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
* Some developers are not familiar with these languages and will need to learn it. There’s a ramp up cost involved for your team if you use it for your projects.

Question 44

Explain the difference between mutable and immutable objects

Answer 44

mutable object - state can be modified after it is created.

immutable object - state cannot be modified after it is created.

In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable.

Question 45

Explain the difference between synchronous and asynchronous functions.

Answer 45

Synchronous functions are blocking while asynchronous functions are not.

In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.

Asynchronous functions usually accept a callback as a parameter and execution continues on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty.

Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).

Question 46

What is the memory heap

Answer 46

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

The heap is a different space for storing data where JavaScript stores objects and functions. Unlike the stack, the engine doesn’t allocate a fixed amount of memory for these objects. Instead, more space will be allocated as needed.

Question 47

Single threaded vs multithreaded

Answer 47

JS is a single threaded language

Python is multithreaded but typically used as a single threaded language

Question 48

differences between var, let, const

Answer 48

var and let create variables that can be reassigned another value.

const creates “constant” variables that cannot be reassigned another value.

developers shouldn’t use var anymore. They should use let or const instead.

if you’re not going to change the value of a variable, it is good practice to use const.

Question 49

Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?

Answer 49

One obvious benefit of arrow functions is to simplify the syntax needed to create functions, without a need for the function keyword.

this within arrow functions is also bound to the enclosing scope which is different compared to regular functions where this is determined by the object calling it.

Lexically-scoped this is useful when invoking callbacks especially in React components.

Question 50

What advantage is there for using the arrow syntax for a method in a constructor?

Answer 50

The main advantage of using an arrow function as a method inside a constructor is that the value of this gets set at the time of the function creation and can’t change after that. So, when the constructor is used to create a new object, this will always refer to that object. For example, let’s say we have a Person constructor that takes a first name as an argument has two methods to console.log that name, one as a regular function and one as an arrow function

he main takeaway here is that this can be changed for a normal function, but the context always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn’t have to worry about the context changing.

This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind this in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind “this”, as the method will automatically get its “this” value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)

Question 51

What is the definition of a higher-order function?

Answer 51

any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result.

Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is map, which takes an array and a function as arguments. map then uses this function to transform each item in the array, returning a new array with the transformed data.

Other popular examples in JavaScript are forEach, filter, and reduce. A higher-order function doesn’t just need to be manipulating arrays as there are many use cases for returning a function from another function. Function.prototype.bind is one such example in JavaScript.

Question 52

ES6 Class Constructor

Answer 52

The constructor method is a special method of a class for creating and initializing an object instance of that class.

class Car {
    constructor(brand) {
        this.brand = brand
    }
}

let car1 = new Car("bmw")
car1.brand  // bmw

Question 53

Can you give an example for destructuring an object or an array?

Answer 53

Array destructuring
~~~
// Variable assignment.
const foo = [‘one’, ‘two’, ‘three’];

const [one, two, three] = foo;
console.log(one); // “one”
console.log(two); // “two”
console.log(three); // “three”
~~~

Object destructuring
~~~
// Variable assignment.
const o = {p: 42, q: true};
const {p, q} = o;

console.log(p); // 42
console.log(q); // true
~~~

Question 54

What are the benefits of using spread syntax and how is it different from rest syntax?

Answer 54

ES6’s spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to Object.create, slice, or a library function. This language feature is used often in Redux and RxJS projects.

function putDookieInAnyArray(arr) {
  return [...arr, 'dookie'];
}

const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]

ES6’s rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.

function addFiveToABunchOfNumbers(...numbers) {
  return numbers.map((x) => x + 5);
}

const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]

const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

Question 55

How can you share code between files?

Answer 55

‘export’ and ‘import’ keywords

Question 56

What values evaluate to Falsy in JS

Answer 56

””, 0, -0, null, Nan, false, undefined

Question 57

async await

Answer 57

async function fetchMoviesJSON() {
  const response = await fetch('/movies');
  const movies = await response.json();
  return movies;
}

fetchMoviesJSON() is an asynchronous function since it’s marked with the async keyword.

await fetch(‘/movies’) starts an HTTP request to ‘/movies’ URL. Because the await keyword is present, the asynchronous function is paused until the request completes.

Question 58

Memory - Stack vs Heap

Answer 58

Stack
* Primitive values and references
* Size is known at compile time
* Allocates a fixed amount of memory

Heap
* Objects and functions
* Size is known at run time
* No limit per object

Question 59

Callback functions

Answer 59

a function passed into another function as an argument

Question 60

const user = {
  id: 339,
  name: 'Fred',
  age: 42
};
const {name: callSign} = user;

What is the value of callSign?

Answer 60

–> user.name

this is just how to use obj destructuring and save the value to a new variable name (callSign)

Question 61

const user = {
  id: 339,
  name: 'Fred',
  age: 42,
  education: {
    degree: 'Masters'
  }
};
const {education: {degree}} = user;

What is the value of degree?

Answer 61

–> ‘Masters’

This is the syntax for obj destructuring for nested objects

Question 62

Imperative vs Declarative

Answer 62

• Imparative - Follow my commands exactly, do this, then that
• Declarative - Here’s what I want, do it how you’d like

Question 63

The #1 main concept in functional programming

Answer 63

Pure functions

Question 64

Deterministic function

Answer 64

for same input x, output should always be the same y

Question 65

Benefits of functional programming

Answer 65

• More predictable, safer
• easier to test/debug

Question 66

Code example for currying

Answer 66

function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

function curryGreet(greeting) {
  return function (name) {
    return `${greeting}, ${name}!`;
  }
};

const greetItal = curryGreet("Ciao");
greetItal("Alonzo"); // "Ciao, Alonzo!"

const greetTex = curryGreet("Howdy");
greetTex("Alonzo"); // "Howdy, Alonzo!"
greetTex("Alan"); // "Howdy, Alan!"

Question 67

console.dir()

Answer 67

shows all the properties of a specified JavaScript object, including hidden properties like:
* [[Prototype]]
* [[Scopes]] (where you can see closure)

Question 68

[[Prototype]]

Answer 68

[[Prototype]] is a hidden private property that all objects have in Javascript, it holds a reference to the object’s prototype.

Question 69

Why JS is a “lexically-scoped” language

Answer 69

b/c where a funtion was defined determines what data it has available when it is called at a later time

e.g. inner functions w/closure

Question 70

How to make an iterator also an iterable

Answer 70

It is very easy to make an iterator also iterable: just implement an @@iterator method that returns this.

// Satisfies both the Iterator Protocol and Iterable
const myIterator = {
  next() {
    // ...
  },
  [Symbol.iterator]() {
    return this;
  },
};

Question 71

_ _ proto _ _

Answer 71

• aka dunder proto
• deprecated, should not use
• exposes the hidden [[Prototype]] property of an objects and allows you to access or modify it
• modern way of accessing an objets prototype is by using Object.getPrototypeOf(obj)

Question 72

Scope Chain

Answer 72

JS engine will try to find the variable’s value in:
1. the current scope.
2. If it could not find the variable, it will look into the outer scope
3. and will continue to do so until it finds the variable or reaches global scope.

Question 73

Make a generator called makeRangeIterator

Answer 73

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield i;
  }
  return iterationCount;
}

const it = makeRangeIterator()
it.next() // {value: 0, done: false}
it.next() // {value: 1, done: false}

Question 74

What does it mean to consume an API?

Answer 74

Just means “to use” the API (make requests)

Question 75

What is TypeScript

Answer 75

A strongly typed programming language that builds on top of JavaScript

First, you write the TypeScript code.

Then, you compile the TypeScript code into plain JavaScript code using a TypeScript compiler.

Once you have the plain JavaScript code, you can deploy it to any environments that JavaScript runs.

Question 76

Interpreted vs. Compiled Languages

Answer 76

In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don’t have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that.

From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.