ES6 Flashcards
What is a code block? What are some examples of a code block?
Code blocks are denoted by curly braces {} (the space between the braces)
Function code blocks, conditional code blocks, loop code blocks
(With the exception of objects)
What does block scope mean?
The scope is only within the code block, and block-scoped variables (declared with let or const) are separate entities from those declared outside the blockvar variables are accessible outside of a code block EXCEPT for function code blocks
What is the scope of a variable declared with const or let?
block scoped
What is the difference between let and const?
let values can be reassigned while const values cannot
However, objects assigned to const variables are still mutable, but the object that a const variable is referring to cannot be changed
Why is it possible to .push() a new value into a const variable that points to an Array?
The variable has the same memory address as its value, referring to a certain array. The array is mutable but the location in memory remains constant
The name binding cannot be changed
The array remains constant, not the elements within it
How should you decide on which type of declaration to use?
Just use let and const from now on
If a variable will be changed (incremented, reassigned, appended to when it’s a primitive), use let rather than const
What is the syntax for writing a template literal?
Wrap a string in backticks ` instead of quotes
Interpolations are denoted with ${ }
What is “string interpolation”?
Substituting parts of a string with the values of variables or expressions
Inserting values into a string (interpolation is the insert something of a different nature into something else)
In the context of template literals, Hello my name is ${nameVariable}. the value of variable nameVariable is interpolated into the string
What are tagged templates?
Tag templates allow a function to be applied to the string interpolation by prefacing the template literal with the function name let greeting = myFunc`Hi`;
Template tag functions should be like
```javascript
function tag(literals, ...substitutions) {
// literals will be an array, holds the strings delimited by the substitutions
// substitutions is also an iterable holding the value of the variables that are being subtituted/interpolated in
// return a string from the function
}
~~~
What can template literals be used for?
- String interpolation
- Multiline strings without having to use slashes and newline characters
- Inserting HTML
What is destructuring, conceptually?
Taking the properties of an object (and similarly, the elements of an array) and assigning them to multiple variables in one go
Taking the structure of an object (or array) and breaking that structure down to get at the inner components
What is the syntax forObjectdestructuring?
```javascript
const { // const can be let or var
property1InMyObj: variableToStoreProp1,
property2InMyObj: variableToStoreProp2,
propertyWithNesting: {
nestedProp1: varToStoreNested1,
nestedProp2: varToStoreNested2 = ‘default value if nestedProp2 does not exist’
}
} = myObj;
// We can also do = myObj || {} if myObj might be null. This makes all the variables that would have come out === undefined instead of throwing an error
~~~
What is the syntax forArraydestructuring?
```javascript
let [ // let can be const or var
variableForIdx0,
variableForIdx1,
variableForIdx2,
[
variableForNestedIdx0,
variableForNestedIdx1 = ‘default value if no value at nested index 1’,
variableForNestedIdx2 = ‘default value if no value at nested index 2’
]
] = myArr;
// We can also do = myArr || [] as a fallback for if myArr might be null. This makes all the variables === undefined instead of throwing an error just like object destructuring
~~~
How can you tell the difference between destructuring and creatingObject/Arrayliterals?
Destructuring looks like an `Object` or `Array` literal, but it will be on the left side of an assignment operator (in the space for "where things get stored")
The `Object`/`Array` literals will be on the right side (in the space for "what will be assigned to something")
_e.g._ `let { property: newVar } = object` vs. `let object = { property: newVar }`
More subtle example, when destructuring is used for function params
```javascript
//These two functions do the same thing given object person
let exPerson = {
firstName: 'John',
lastName: 'Doe'
};
function display(personObj) {
console.log(personObj.firstName, personObj.lastName)
}
function display({firstName: varFirstName, lastName: varLastName}) {
console.log(varFirstName, varLastName);
}
// You aren't passing in an object literal as a parameter. You are setting the parameter to the argument. The following is happening, which is how we can tell we're working with a destructuring:
// myParam = passedArg
// {firstName: varFirstName, lastName: varLastName} = person
// This ^ is the syntax for a destructuring!
~~~
What is the syntax for defining an arrow function?
Instead of function (param1, param2) { //stuff } it is (param1, param2) => { //stuff }
When an arrow function’s body is left without curly braces, what changes in its functionality?
The arrow function returns value of the expression of the (now curly braces-less body)
An implicit return (Tim calls that part a “return expression”)
How is the value ofthisdetermined within an arrow function?
While regular function syntax will create a new function that creates its own this, arrow functions do not create their own this. Instead, it will be lexically scoped, so it will find the this for the context that it is within
They don’t create their own this binding
Value of this is defined at definition time, not at call time (which is the case for traditional ES5 functions)
If you can’t see where it’s being called, this might be referring to the global window
What are the three states a Promise can be in?
- pending
- fulfilled
- rejected
How do you handle the fulfillment of a Promise?
Pass a function as the first argument to a .then method on the Promise
How do you handle the rejection of a Promise?
Either pass a function as the second argument to a .then method, or a function as the only argument in a .catch method
What is Array.prototype.filter useful for?
It is useful for extracting out values from an Array in a simple and repeatable way, and is particularly useful when extracting out values based on criteria other than matching the values themselves
What is Array.prototype.map useful for?
It is useful for manipulating/transforming elements inside an array (and getting a new array)
What is Array.prototype.reduce useful for?
It is useful for “aggregating” elements in an array into a single entity, and the aggregation does not have to be simply mathematical operations on numbers. It can be used any time we have an array of things that we want to do stuff to, and we want the end result to be a single thing.
What is “syntactic sugar”?
Syntax that makes code easier/”sweeter” to read for humans but can be removed without affecting the capabilities of the language (extra stuff to make things easier to work with)
What is thetypeofan ES6 class?
- The class is a function, more precisely a constructor function
- ES6 classes are syntactic sugar for constructor functions
Describe ES6 class syntax.
-
classkeyword followed by the name of the class, then curly braces. Inside the braces, a functionconstructorwhich is called when a new object of that class is instantiated. The constructor function is followed by method definitions written like function definitions- ```javascript
class Student {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return${this.firstName} ${this.lastName};
}
}
~~~
- ```javascript
What is “refactoring”?
Refactoring is rewriting code without affecting the functionality/behavior of the program, usually to make code cleaner and more maintainable
How are ES Modules different from CommonJS modules?
- They have a different syntax (
importandexportinstead ofrequire()andmodule.exports)- ES Modules are official and are supported by browsers and “other JavaScript runtimes”
- Node.js (a runtime) used to use CommonJS syntax while others used ECMAScript modules
- ES Modules are official and are supported by browsers and “other JavaScript runtimes”
What kind of modules can Webpack support?
Webpack supports ECMAScript modules as well as CommonJS modules (AMD, async module definitions, all out of the box), and can support even more with loaders
What doesfetch()return?
A Promise that only resolves to reject if there is a network error that prevents the request from completing, otherwise a response object
What is the default request method used byfetch()?
GET
How do you specify the request method (GET,POST, etc.) when callingfetch?
After the URL, specify in the options object { method: 'GET' }
