ES6

Question 1

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

Answer 1

In JavaScript, blocks are denoted by curly braces {}. 
Ex. for example, the if else, for, do while, while, try catch and so on: 
if (condition) {
   // inside a code block
}

Question 2

What does block scope mean?

Answer 2

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

‘var’ is function scoped, while const and let are block scoped.

Question 3

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

Answer 3

Block scope

Question 4

What is the difference between let and const?

Answer 4

• Like the let keyword, the const keyword declares blocked-scope variables.
  HOWEVER, the block-scoped variables declared by the const keyword can’t be reassigned.
• The variables declared by the let keyword are mutable. It means that you can change their values anytime you want.
  However, variables created by the const keyword are “immutable”. In other words, you can’t reassign them to different values.
  If you attempt to reassign a variable declared by the const keyword, you’ll get a TypeError
  The const keyword ensures that the variable it creates is read-only.

Question 5

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

Answer 5

Even though the const keyword ensures that the variable is read-only,  it doesn’t mean that the actual value to which the const variable references is immutable.
ex. 
const person = { age: 20 };
person.age = 30; // OK
console.log(person.age); // 30

However, you cannot reassign a different value to the person constant like this:
person = { age: 40 }; // TypeError

Question 6

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

Answer 6

Use let when you know that the value of a variable will change/reassigned. Use const when you know that identifier won’t be reassigned.

Use let when you need to reassign a variable. You should use one variable to represent one thing, the use case for let tends to be for loops or mathematical algorithms.

Question 7

What is the difference between using ‘var’ and ‘let’?

Answer 7

1) “var” is function-scoped, whereas “let” is block-scoped.

2) Using “var” attaches the variable to the window, whereas “let” prevents it.

Question 8

What is the syntax for writing a template literal?

Answer 8

• Instead of using the single quotes or double quotes, a template literal uses backticks
• Using the backticks, you can freely use the single or double quotes in the template literal without escaping.
  ex.
  let anotherStr = Here's a template literal;
• If a string contains a backtick, you must escape it using a backslash ()
  ex.
  let strWithBacktick = Template literals use backticks \ insead of quotes`;

Question 9

What is “string interpolation”?

Answer 9

• The ability to substitute part of the string for the values of variables or expressions. The JavaScript engine will automatically replace these variables and expressions with their values.
• To instruct JavaScript to substitute a variable and expression, you place the variable and expression in a special block as follows:
  ${variable_name}
• example:
  let firstName = ‘John’,
  lastName = ‘Doe’;

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe

Question 10

What is destructuring, conceptually?

Answer 10

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

Question 11

What is the syntax for Object destructuring?

Answer 11

ex. 
let person = {
    firstName: 'John',
    lastName: 'Doe'
};
let { firstName: fname, lastName: lname } = person;
- Code language: JavaScript (javascript)
In this example, the firstName and lastName properties are assigned to the fName and lName variables respectively.

Question 12

What is the syntax for Array destructuring?

Answer 12

Ex. 
const thing = ["Table", "Chair", "Fan"];
const [a, b, c] = thing;
console.log(a); // Output: Table
console.log(b); //Output: Chair
console.log(c); //Output: Fan

• It takes each variable on the array literal on the left-hand side and maps it to the same element at the same index in the array.

Question 13

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

Answer 13

For destructuring, you take an existing variable that you would like to destructure and put it on the right side of the = sign and use object/array syntax after the const variable keyword.
When creating Object/Array literals, you make the object/array on the right side of the equal sign and assign to a unique variable name on the left side of the equal sign.

Question 14

What is the syntax for defining an arrow function?

Answer 14

1. Remove the word “function” and place arrow between the argument and opening body bracket
2. Remove the body braces and word “return” — the return is implied.
3. Remove the argument parentheses. However, if you have multiple arguments or no arguments, you’ll need to re-introduce parentheses around the arguments

ex.
1. (param1, param2) => {return;};
2. param => exp;
3. () => exp;

Question 15

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

Answer 15

• Without curly braces {}. With this syntax, the arrow function has an implicit return.
• With curly braces {}. With this syntax, the arrow function does not have an implicit return.
• The function body gets evaluated as an expression. Implicitly, the arrow function returns that result of that expression.

Question 16

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

Answer 16

For arrow function, the value of this is determined when the arrow function is defined(definition time).
The opposite of normal functions (this is determined when the function is called(call time))

Question 17

What are the three states a Promise can be in?

Answer 17

Pending, resolved, or rejected

• One and done
• Fail or success ONCE

Question 18

How do you handle the fulfillment of a Promise?

Answer 18

Use the then() method. 
The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.

Question 19

How do you handle the rejection of a Promise?

Answer 19

You use the catch() method.
The catch() method returns a Promise and deals with rejected cases only.

Question 20

What is Array.prototype.filter useful for?

Answer 20

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 21

What is Array.prototype.map useful for?

Answer 21

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

Question 22

What is Array.prototype.reduce useful for?

Answer 22

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.

Question 23

What is the difference between forEach and map?

Answer 23

forEach does not return anything while map does have a return

Question 24

What is “syntactic sugar”?

Answer 24

Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.

Question 25

What is the typeof an ES6 class?

Answer 25

Functions

Question 26

Describe ES6 class syntax.

Answer 26

1. Class keyword
2. Define the function name
3. Code block
4. Within the code block there is an optional constructor keyword that includes the parameters
5. Code block that includes the parameters being assign to “this”
6. Method calls that you would like to be defined.

ex. 
class Person {
    constructor(name) {
        this.name = name;

    }
    getName() {
        return this.name;
    }
}

Question 27

What is “refactoring”?

Answer 27

code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality.

Question 28

How to you read: 
class Student {
  constructor(firstName, lastName, subject) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.subject = subject;
  }

Answer 28

We have a class being defined name student with an opening curly brace for the class body. 
We have a constructor method being defined with \_\_ parameters and an opening curly brace for the method code block.

Question 29

How do you read:
getFullName() {
    const { firstName, lastName } = this;
    return `${firstName} ${lastName}`;
  }

Answer 29

The prototype method getFullname is being defined and an opening curly brace for the method code block.
the “this” variable is being destructured and assigned to the const variable firstName and lastName.

Question 30

How are ES Modules different from CommonJS modules?

Answer 30

ES modules are the standard for JavaScript, while CommonJS is the default in Node.js.
The syntax is also different.

Question 31

What kind of modules can Webpack support?

Answer 31

ECMAScript modules. CommonJS modules. AMD modules.