ES6 Flashcards
What is Babel?
(The most popular es6 transpiler)
• Transpiles es6 into the supported pre-es6 JS so browsers can read the newer version.
What is a “transpiler”?
A transpiler reads code written in one language and produces the equivalent code in another.
Why do we need transpilers?
- We need transpilers so that our pretty es6 code compiles into the dense JavaScript code that browser like.
- Browsers only currently have widespread support of older JS
- Transpilers convert advanced TypeScript and CoffeeScript code back into the original JS
Benefits of webpack
Using webpack allows us to create an environment that transforms es6 code with babel.
• It combines multiple modules into one js file to reduce errors and resources on the client-side.
• Shipping with a development server, it gives us live code updating for free!
What is weppack
Webpack is an open-source JavaScript module bundler. It is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, even images if the corresponding plugins are included.
{variable name} some words
template literals
{…variable name}. Inserts the content of one variable into another variable by inserting …variableName
Spread Operator
The ‘var’ keyword allows for block scoping?
False. It does not allow block scoping. Re-using the same variable with ‘var’ twice in coding blocks will overwrite data.
Which es6 keyword declares a variable that cannot be re-assigned or re-declared?
const
___ replaces var in es6 in term of variable assignment.
let
T or F: “let” allows for block scoping.
True
T or F: “const” allows for block scoping
True
_____ scope refers to the set of statements, variables, objects, and more that confine to a coding block denoted by a pair of curly braces: {…}
Local
____ scope refers to the set of statements, variables, objects, methods, and more that exist outside and beyond all local scope functions and coding blocks.
Global
____ ______ allow for the gathering of multiple parameter calls into one array: Denoted by three periods.
Rest parameter
Destructuring assignment on arrays allows for much more efficient array manipulation and assigns multiple variables from array data based on the index value.
just remember
Destructuring assignment on objects allows for more concise object manipulation and assigns multiple variables from object data based on keynames.
just remember
By default, _____ functions are anonymous.
anonymous
() => {} : This syntax is…
an arrow function
The ____ _____ creates new arrays by calling a function on individual
map method
The ____ _____ creates new arrays based on an original array and a certain test on each of its element.
filter method
The most common ways you’ll see arrow functions show up in es6 code is with _____ methods.
helper
What are modules?
Split code into unique files baed on relevant data.
Enables us to split our code into files based on relevant information.
We handle modules in es6 with the _____ and _____ keywords.
import and export
_____ keyword sends data to other modules
export
What are anonymous function expressions?
Function expressions that don’t explicitly assign a name to the function like a function declaration does.
Change the code below to an arrow function:
setTimeout (function() {
console.log(“Woohoo!”);
}, 3000);
setTimeout (() => {
console.log(“Woohoo!”);
}, 3000);
Change the code below to a string literal template:
let b = “wooh” + “oo”.repeat(50) + “oo”;
console.log(b);
let b =`wooh${"oo.repeat(50)}`;
console.log(b);T or F: Arrow functions are anonymous by default
True. Anonymous functions are always anonymous because they do not use the ‘function declaration.
T or F: Which es6 helper method allows us to create arrays by calling a specific function on each element within an initial array?
map method
Which built-in helper method could I use to check if a number is a not greater than 2^53 in JavaScript?
Number.isSafeInteger()
Classes in JavaScript are defined with the ____ keyword and uses a ______.
class. constructor
Classes in JavaScript relate to each other through ______.
inheritance
Classes in JavaScript use the ____ keyword to create child classes.
extends
What is Object-Oriented Programming?
Objects or classes hold relevant data that interact with each other.
Is JavaScript based on object-oriented programming or prototype inheritance model?
Prototype inheritance model
Classes are _______ on top of JavaScript prototypes.
extractions
A prototype reveals an object’s _______.
parent
All objects - Arrays, Dates, etc.. have a ______.
prototype
T or F: Objects (including arrays and functions) assigned to a variable using const are mutable.
True
higher order functions, such as map(), filter(), and reduce(), take other functions as arguments for processing ______________.
collections of data.
With the ____ operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.
rest
The _______ keyword initializes an object for class.
constructor
The _____ keyword creates subclasses and children of parent classes.
extends
T or F: Static methods in classes can be called even outside the context of class.
True
JavaScript is not based on object-oriented programming, but a _____-_______ model
prototypal-inheritance
A _________ is a characteristic in every JavaScript object that reveals its parent and the properties that it inherits.
prototype
All JavaScript _____ contain a prototype and can trace their chain of prototypal inheritance all the way back to the base level Object prototype.
objects
Arrow functions don’t create their own local ‘this’ object like a normal function prototype, but instead refer to the ‘this’ tied to its _____ scope.
outer
classes are simply ___1___, and ____1____ are simply references to an object’s parent.
prototypes,
classes are simply prototypes, and prototypes are simply references to an object’s ______.
parent
Data structures in computer science refer to…
the programming storage of data for efficient usage in applications and algorithms.
A Set compares to a more advanced array that has all ____ elements and no _____ values.
unique, duplicate
Set iteration frequently occurs through the _____ helper method.
values()
A ____ represents a more advanced object in es6 with key-value pairs that can have non-string keys.
Map
Map() is an alternative to using _____ _____ for storing key/value pairs that requires unique keys.
object literals
How do you create a new Map?
new Map([iterable: can be an array or any iterable object whose elements are key/value pairs]).
Map iterate frequently occurs through the ______ helper method.
entries()
Closures
Functions that remember the environment that they were created in and could further reference the independent variables within that environment.
Function Factories
Functions that return other functions to make more adaptable methods.
ES6 Generators
Breaks the typical “run to completion” model for functions.
• Whenever we run a function we expected to complete before moving on in the program, therefore other expressions and statements can only happen once the function has finished. Generators can pause and resume a function, with yield() and next()
what is an iterator?
Accesses items from a collection or array one at a time and it keeps track of its position as it does so.
Es6 generators have a ____, ____, and ____ functionality.
start, pause, and reset
Do generators follow the typical “run to completion” model of normal functions?
No. Generators break the “run to completion” model and introduce functions that can start, pause, and reset!
Which of the following lines demonstrates a proper instance of a generator?
a. const gen = new generator();
b. const gen = generator();
b. const gen = generator(); Generators actually do not use the ‘new’ keyword to instantiate.
Which keyword is used within a generator to tell it to ‘pause’?
yield
What is the syntax for a generator?
Generators use the syntax of a normal function, but have an asterisk following the function keyword: function* generator { … } .
The generator ____ keyword signals when to ‘pause’ the function and return its current state.
yield
Generator instances don’t use the ____ keyword like the typical function prototype or Object.
new
Using the generator’s special ____ method allows us to access its yielded state.
next()
Passing values to the ____ method introduces a way for generators to reset, or complete their runtime.
next()
An ______ in JavaScript demonstrates a type of object that can access values in a collection one at a time.
iterator
Why are generators so useful?
Because they introduce a lot of control in flow of functions.
