ES6 Flashcards
What are the differences in scope of the var and let keywords?
When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function.
The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.
What will the below code return?
Why?
It will return “3” because a stored function will always return the updated (global) value of a variable declared using the “var” keyword.
What will this code return?
Why?
It will return “2” because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement only; and throw an error that i is not defined because i was not declared in the global scope. It is only declared within the for loop statement.
What are the major differences between var, let and const?
These are all keywords for variable declaration.
var is the ES5 stardard one and it has global scope (unless it is declared inside a function). let does not allow a variable to be re-declared and has only local scope. const has the same attributes than let and, in addition, it does not allow the values originally assigned to a variable to be changed.
What will be the output of the below code?
What does that imply regarding the mutabilty of const?
s = [1, 2, 3] will result in an error. The console.log will display the value [5, 6, 45].
This means that const objects are still mutable enven tho re-agnement of const variables are illegal.
You can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.
In ES6, how is an object nade immutable?
By using the function Object.freeze
In the code, below, the obj.review and obj.newProp assignments will result in errors, because our editor runs in strict mode by default, and the console will display the value { name: “FreeCodeCamp”, review: “Awesome” }.
What is an annonymous function? Why would you create one?
A function without a name. You would create one when you use such a funtion as an argument of another function i.e. a non-reusable function.
Re-write the below code in arrow function syntax.
What is the simplified version of the below code? Under what conditions can it be simplified?
This is possible when there is no function body and only a return value. The return keyword can then be omitted.
Can the below code be simplified? Why?
When an arrow function has a single parameter for its arguments, the parentheses enclosing the parameter may be omitted.
What will be the output of the below code?
8
Write the below code in arrow function syntax.
What is a default parameter?
A default parameter is a parameter that kicks in if no parameter is provided (it is undefined).
What is the rest parameter?
An ES6 syntax that allows us to pass as many arguments as we want into a funtion. These arguments are stored in an array that can be accessed later from inside the function.
In ES6 what is the spread operator?
What would this code line return?
An error, as the spread operator only works in place e.g. in an argument to a function or in an array literal.
What version of ES is the following code part of?
What would be the outcome?
ES5
name would have a value of the string John Doe, and age would have the number 34.
What version of ES is the following code belongs to?
What is this type of procedure named?
What would be the outcome?
ES6
This is distructuring.
name would have a value of the string John Doe, and age would have the number 34.
Visualise the ES6 destructuring version of the code below.
What would be the outcome of both?
name would have a value of the string John Doe, and age would have the number 34.
How do you rename object variables while distructuring?
How do destructute nested objects?
What will be the output?
The console will display the values of a and b as 1, 2.
What will be the output?
What is this called?
The console will display the values of a, b, and c as 1, 2, 5.
Array destructiring.
Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a.
[a, b] = [b, a]
What will be the output of the code below?
The console would display the values 1, 2 and [3, 4, 5, 7].
Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the first two elements omitted.
What is the code below doing?
Use destructuring assignment within the argument to the function half to send only max and min inside the function.
What’s the outout of the code below?
Explain what’s happening. What’s this called?
Hello, my name is Zodiac Hasbro!
and I am 56 years old.
This is called a template literal
Use syntatic sugar to simplify the code below.
getMousePosition is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax:
Write this code in a more concise manner.
Refactor the function setGear inside the object bicycle to use the shorthand syntax described above.
Visualise the creation of a constructor using ES6 class syntax.
What should be noted about this syntax?
It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.
In object oriented programming, what are getters and setters?
Getter functions are meant to simply return (get) the value of an object’s private variable to the user without the user directly accessing the private variable.
Setter functions are meant to modify (set) the value of an object’s private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.
Note: It is convention to precede the name of a private variable with an underscore (_). However, the practice itself does not make a variable private.
What does the below script do? Where does it need to be written?
A script that uses this module type can now use the ES6 import and export features.
It needs to be written in the HTML page.
What does the below code do?
When you export a variable or function, you can import it in another file and use it without having to rewrite the code. You can export multiple things by repeating the first example for each thing you want to export, or by placing them all in the export statement of the second example, like this:
How is code (variables, functions, etc.) imported into a file?
How is a whole file imported to another file?
What is export default?
How do you import default objects?
In ES6, what is a promisse?
Visualise an example of a promise code block.
Related to promises, visualise the “Then” method.
When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the then method. The then method is executed immediately after your promise is fulfilled with resolve. Here’s an example:
Related to promises, what is catch?
What’s its sintax?
the method used when your promise has been rejected. It is executed immediately after a promise’s reject method is called.
