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 }
