JavaScript ES6

Question 1

What is a code block? What are some examples of a code block?

Answer 1

A code block is a section of code that is denoted by curly braces ( { } ), also the code in parentheses of the for loop. Some examples of a code block would be functions, if else statements, for loops, while loops, etc.

Question 2

What does block scope mean?

Answer 2

Block scope means that it is only accessible within the code block. What happens inside the code block stays inside the code block.

Question 3

What is the scope of a variable declared with const or let?

Answer 3

Variables declared with const or let are all blocked-scope variables.

Question 4

What is the difference between let and const?

Answer 4

The difference is that const is a read-only reference to a value and are immutable, or can’t be reassigned, while let declarations are mutable, which means you can change their values anytime.

Question 5

Why is it possible to .push() a new value into a const variable that points to an Array?

Answer 5

This is because even though the Array is immutable, its value or its contents are not.

Question 6

How should you decide on which type of declaration to use?

Answer 6

Each declaration should be const, unless you want them to be mutable, in which case you should use go back and change to let. Never var.

Question 7

What is the syntax for writing a template literal?

Answer 7

Use backticks (``) instead of single or double quotes. ${…} is used for expressions (variables, functions, etc.). Only use template literal if you will use substitution.

Question 8

What is “string interpolation”?

Answer 8

The JavaScript engine will automatically replace these variables and expressions (${…}) with their values.

Question 9

What is destructuring, conceptually?

Answer 9

It “destructures” something by giving a name to, or assigning to a variable, each of its parts.

Question 10

What is the syntax for Object destructuring?

Answer 10

const { prop1: variableName1, prop2: variableName2 } = object;
or if variable name will be the same as property name, then:
const { prop1, prop2 } = object

For nested object properties:
const {
name: {
firstName,
lastName
}
} = employee;
to get firstName and lastName.

Question 11

What is the syntax for Array destructuring?

Answer 11

const [x, y, z] = array;

const [
firstName,
lastName,
[
color1,
color2,
color3
]
] = getProfile();
to get colo1, colo2, and color3.

Question 12

How can you tell the difference between destructuring and creating Object/Array literals?

Answer 12

Creating Object/Array literals will have the variable name to the left of the assignment operator while destructuring Object/Array literals will have the variable name to the right of the assignment operator.

Question 13

What is the syntax for defining an arrow function?

Answer 13

Instead of
function (param) {
return value;
}

param => value;

Question 14

When an arrow function’s body is left without curly braces, what changes in its functionality?

Answer 14

It returns the function body. It also won’t be able to have an object literal since both block and object literal use curly brackets, so JavaScript can’t distinguish between a block and an object. Instead, you must wrap the object literal in parentheses.

Question 15

How is the value of this determined within an arrow function?

Question 16

What are the three states a Promise can be in?

Answer 16

1. pending: initial state, neither fulfilled nor rejected.
2. fulfilled: meaning that the operation was completed successfully.
3. rejected: meaning that the operation failed.

Question 17

How do you handle the fulfillment of a Promise?

Answer 17

.then(onFulfillment)

Question 18

How do you handle the rejection of a Promise?

Answer 18

.then(…, onRejection)
or
.catch(onRejection)

Question 19

What does Array.filter do?

Answer 19

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

Question 20

What should the callback function return?

Answer 20

A boolean, true or false.

Question 21

What is Array.filter useful for?

Answer 21

It is useful for creating a new array that contains elements that you care about or pass a test case.

Question 22

What does Array.map do?

Answer 22

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Question 23

What should the callback function return?

Answer 23

An array element that has been mutated with the provided function.

Question 24

What is Array.map useful for?

Answer 24

It is useful for creating a new array that has had something done to each element from the original array. Change and array into react components.

Question 25

What does Array.reduce do?

Answer 25

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Question 26

What action should the callback function perform?

Answer 26

The callback function executes on each element of the array, in order, passing in the return value from the calculation on the preceding element.

Question 27

What should the callback function return?

Answer 27

The final result or return of running the reducer across all elements of the array is a single value.

Question 28

What is Array.reduce useful for?

Answer 28

Using a function on an array to get a single return that can be completed with and is related to each element in the array.

Question 29

What are JavaScript classes?

Answer 29

The basis of Object Oriented Programming (OOP), they describe the behavior of a collection of similar objects. That is, a class describes the methods and properties that these objects all share. In addition, classes support inheritance, meaning that you can extend a class and add additional methods or properties. A class is not an object, but is a template for creating an object. The new operator is used to create objects (“instances”) of a class.

Question 30

When would you want to use a class?

Answer 30

When you want to make objects that have similar properties.

Question 31

How do you declare a class?

Answer 31

class Shape {
constructor(area, circumference) {
this.area = area;
this.circumference = circumference;
}

print() {
return area: ${this.area}, circumference: ${this.circumference};
}
}

const shape = new Shape(1, 4);
console.log(shape.print());

Question 32

How do you inherit from another class?

Answer 32

class Circle extends Shape {
constructor(radius) {
super(Math.PI * radius * radius, 2 * Math.PI * radius);
this.radius = radius;
}

print() {
return ${super.print()}, radius: ${this.radius};
}
}

const circle = new Circle(1);
console.log(circle.print());

Question 33

Why would you want to inherit from another class?

Answer 33

You would want to inherit from another class if you want objects to “borrow” a large part of another object’s behaviors, while overriding or enhancing certain parts with its own logic.

Question 34

How do you add methods and properties to a class?

Answer 34

You add methods by declaring a function in the class code block and ass properties by using this.property = value.