ES6 Flashcards

1
Q

What is Babel?

A

(The most popular es6 transpiler)

• Transpiles es6 into the supported pre-es6 JS so browsers can read the newer version.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is a “transpiler”?

A

A transpiler reads code written in one language and produces the equivalent code in another.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Why do we need transpilers?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Benefits of webpack

A

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!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is weppack

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

{variable name} some words

A

template literals

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

{…variable name}. Inserts the content of one variable into another variable by inserting …variableName

A

Spread Operator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

The ‘var’ keyword allows for block scoping?

A

False. It does not allow block scoping. Re-using the same variable with ‘var’ twice in coding blocks will overwrite data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Which es6 keyword declares a variable that cannot be re-assigned or re-declared?

A

const

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

___ replaces var in es6 in term of variable assignment.

A

let

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

T or F: “let” allows for block scoping.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

T or F: “const” allows for block scoping

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

_____ scope refers to the set of statements, variables, objects, and more that confine to a coding block denoted by a pair of curly braces: {…}

A

Local

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

____ scope refers to the set of statements, variables, objects, methods, and more that exist outside and beyond all local scope functions and coding blocks.

A

Global

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

____ ______ allow for the gathering of multiple parameter calls into one array: Denoted by three periods.

A

Rest parameter

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Destructuring assignment on arrays allows for much more efficient array manipulation and assigns multiple variables from array data based on the index value.

A

just remember

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Destructuring assignment on objects allows for more concise object manipulation and assigns multiple variables from object data based on keynames.

A

just remember

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

By default, _____ functions are anonymous.

A

anonymous

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

() => {} : This syntax is…

A

an arrow function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

The ____ _____ creates new arrays by calling a function on individual

A

map method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

The ____ _____ creates new arrays based on an original array and a certain test on each of its element.

A

filter method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

The most common ways you’ll see arrow functions show up in es6 code is with _____ methods.

A

helper

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are modules?

A

Split code into unique files baed on relevant data.

Enables us to split our code into files based on relevant information.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

We handle modules in es6 with the _____ and _____ keywords.

A

import and export

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

_____ keyword sends data to other modules

A

export

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What are anonymous function expressions?

A

Function expressions that don’t explicitly assign a name to the function like a function declaration does.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Change the code below to an arrow function:
setTimeout (function() {
console.log(“Woohoo!”);
}, 3000);

A

setTimeout (() => {
console.log(“Woohoo!”);
}, 3000);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Change the code below to a string literal template:
let b = “wooh” + “oo”.repeat(50) + “oo”;
console.log(b);

A
let b =`wooh${"oo.repeat(50)}`;
console.log(b);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

T or F: Arrow functions are anonymous by default

A

True. Anonymous functions are always anonymous because they do not use the ‘function declaration.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

T or F: Which es6 helper method allows us to create arrays by calling a specific function on each element within an initial array?

A

map method

31
Q

Which built-in helper method could I use to check if a number is a not greater than 2^53 in JavaScript?

A

Number.isSafeInteger()

32
Q

Classes in JavaScript are defined with the ____ keyword and uses a ______.

A

class. constructor

33
Q

Classes in JavaScript relate to each other through ______.

A

inheritance

34
Q

Classes in JavaScript use the ____ keyword to create child classes.

A

extends

35
Q

What is Object-Oriented Programming?

A

Objects or classes hold relevant data that interact with each other.

36
Q

Is JavaScript based on object-oriented programming or prototype inheritance model?

A

Prototype inheritance model

37
Q

Classes are _______ on top of JavaScript prototypes.

A

extractions

38
Q

A prototype reveals an object’s _______.

A

parent

39
Q

All objects - Arrays, Dates, etc.. have a ______.

A

prototype

40
Q

T or F: Objects (including arrays and functions) assigned to a variable using const are mutable.

A

True

41
Q

higher order functions, such as map(), filter(), and reduce(), take other functions as arguments for processing ______________.

A

collections of data.

42
Q

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.

A

rest

43
Q

The _______ keyword initializes an object for class.

A

constructor

44
Q

The _____ keyword creates subclasses and children of parent classes.

A

extends

45
Q

T or F: Static methods in classes can be called even outside the context of class.

A

True

46
Q

JavaScript is not based on object-oriented programming, but a _____-_______ model

A

prototypal-inheritance

47
Q

A _________ is a characteristic in every JavaScript object that reveals its parent and the properties that it inherits.

A

prototype

48
Q

All JavaScript _____ contain a prototype and can trace their chain of prototypal inheritance all the way back to the base level Object prototype.

A

objects

49
Q

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.

A

outer

50
Q

classes are simply ___1___, and ____1____ are simply references to an object’s parent.

A

prototypes,

51
Q

classes are simply prototypes, and prototypes are simply references to an object’s ______.

A

parent

52
Q

Data structures in computer science refer to…

A

the programming storage of data for efficient usage in applications and algorithms.

53
Q

A Set compares to a more advanced array that has all ____ elements and no _____ values.

A

unique, duplicate

54
Q

Set iteration frequently occurs through the _____ helper method.

A

values()

55
Q

A ____ represents a more advanced object in es6 with key-value pairs that can have non-string keys.

A

Map

56
Q

Map() is an alternative to using _____ _____ for storing key/value pairs that requires unique keys.

A

object literals

57
Q

How do you create a new Map?

A

new Map([iterable: can be an array or any iterable object whose elements are key/value pairs]).

58
Q

Map iterate frequently occurs through the ______ helper method.

A

entries()

59
Q

Closures

A

Functions that remember the environment that they were created in and could further reference the independent variables within that environment.

60
Q

Function Factories

A

Functions that return other functions to make more adaptable methods.

61
Q

ES6 Generators

A

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()

62
Q

what is an iterator?

A

Accesses items from a collection or array one at a time and it keeps track of its position as it does so.

63
Q

Es6 generators have a ____, ____, and ____ functionality.

A

start, pause, and reset

64
Q

Do generators follow the typical “run to completion” model of normal functions?

A

No. Generators break the “run to completion” model and introduce functions that can start, pause, and reset!

65
Q

Which of the following lines demonstrates a proper instance of a generator?

a. const gen = new generator();
b. const gen = generator();

A

b. const gen = generator(); Generators actually do not use the ‘new’ keyword to instantiate.

66
Q

Which keyword is used within a generator to tell it to ‘pause’?

A

yield

67
Q

What is the syntax for a generator?

A

Generators use the syntax of a normal function, but have an asterisk following the function keyword: function* generator { … } .

68
Q

The generator ____ keyword signals when to ‘pause’ the function and return its current state.

A

yield

69
Q

Generator instances don’t use the ____ keyword like the typical function prototype or Object.

A

new

70
Q

Using the generator’s special ____ method allows us to access its yielded state.

A

next()

71
Q

Passing values to the ____ method introduces a way for generators to reset, or complete their runtime.

A

next()

72
Q

An ______ in JavaScript demonstrates a type of object that can access values in a collection one at a time.

A

iterator

73
Q

Why are generators so useful?

A

Because they introduce a lot of control in flow of functions.