ES6 Javascript Flashcards

Question 1

Q

Must you explicitely type variables?

Answer

A

No,

var i = 0;

OR

i = 0;

OR

i = { }

which means you can assign them to another type.

Question 2

Q

how is var scoped

Answer

A

Function unless there is no function in which case it is global

Question 3

Q

how is let scoped

Answer

A

Block as in between the curly braces

Question 4

Q

let i = 10;

if (i == 10) { let i = 5; console.log(i); {

console.log (i);

What is the output from this?

Answer

A

5 10

because the let in side the curly braces is scoped within the curly braces.

Question 5

Q

Is "let" hoisted inside a function?

Answer

A

No, if it is referenced before it is declared, you get an error.

Question 6

Q

Example of Tagged Templates. (note back ticks)

Assume let harry = ` Mr. and Mrs. Dursley next door ` let fred= ` Mr. and Mrs. Baggins the other next door ` let betty = ` Mr. and Mrs. Bilbo across the street`

let lines = [ harry, fred, betty ] ;

using a function buildHTML

Answer

A

function buildfHTML(strings, expr, expr1, exprLines) { console.log(strings); console.log(expr); console.log(expr1); console.log(exprLines); }

const result = buildHTML`${ lines[0] }, ${ lines[1] }, ${ exLines }`

Question 7

Q

What are REST parameters?

Answer

A

indicates the "rest of" the parameters :-)

Input: function example( first, last, ...details);

This is the opposite of "Spread" parameters.

Question 8

Q

What are spread parameters?

Answer

A

The opposite of REST parameters, the Spread the argument out in a statement as here:

function example(message, ...parms) { console.log(message, ...parms);

Question 9

Q

Show an example of a tail call?

Answer

A

If the last line of a function (the return statement) calls yet another function ( or recurses ) and then further manipulates the return from the call before returning, this is not a tail call and requires additional stack for the call.

If it does NOT manipulate the results of the call before returning, TCO (Tail call optimization) just reuses the existing call stack with out any further stack allocation.

Question 10

Q

Given variables a and b and then an array: ara = [ 'first', 'second"],

show a destructured assignment leaving a = 'first', and b= 'second'.

Answer

A

[a, b] = ...ara;

OR

[a, b] = [ 'first', 'second']

[a, b, ...rest] = ['first, 'second', 30, 40, 50]; here rest becomes [ 30, 40, 50 ]

Question 11

Q

What happens in ES6+ for the following destructuring of variables fromobjects?

var course = { name: "French", publisher: "Louis" };

function crsDetails( course ) { let { name, publisher, price } = course; ...

Answer

A

ES6+ at least recognizes it as an error since price can't be set.

Question 12

Q

Show how to mark a parameter is optional in a destructured expression that follows: (price is optional)

let { name, publisher, price } = c;

Answer

A

let { name, publisher, ?price } = c;

Question 13

Q

Difference between for .. of and for .. in operators.

Answer

A

for ...of use to iterate over interables (arrays).

for ...in use to iterate over properties of an object.

Question 14

Q

How to retrieve value(s) from ageneratorsuch as:

function * generatorFunction( ) { yield 'a'; yield 'b'; return 'c'; yield 'd'; }

What happens when it is called four times.

Answer

A

Calling

var x = generatorFunction( );

will return 'a', then 'b', then returns with the done property set to true.

Question 15

Q

What type of object is returned by a generator function?

Answer

A

last Yielded value or null if done

Question 16

Q

let s = new Set( [ 10, 20, 30 ] );

s.add( 20 );

What will happen?

Answer

A

20 will not be added again because it is already there.

Question 17

Q

How to remove entry '20' from a set 's'.

Answer

A

s.delete( 20 );

Question 18

Q

Show using a Map iterator to get map entry contents.

Answer

A

m.set( '0', 'foo' ); m.set( 1, 'bar' ); const iterator = m.keys(); console.log(iterator.next().value ); // "0" console.log(iterator.next().value ); // 1

m.size; // 2

Question 19

Q

Show how to set a map entry.

Console.log( show if value was set );

Answer

A

myMap = new Map(); ... myMap.set( name,'first' );

console.log( myMap.has(keyvalue) ); // true of false

Question 20

Q

show how to empty a map.

Answer

A

map.clear( );

Question 21

Q

show how to delete a specific map entry

Answer

A

map.delete( key );

Question 22

Q

Show how to get the value of a map given a key

Answer

A

myValue = map.get( key );

Question 23

Q

Show how to test for a specific key value in a map.

Answer

A

map.has( key );

Question 24

Q

show how to interate over a map and show the key, value, and map.

Answer

A

var m = new Map( ); m.set( 'a', 1 ); m.set( 'b', 2 )

m.forEach ( (k, v, m) => console.log( `key: ${ k } value: ${ v } map: ${ m }`) )

// key:1 value:a map:[object Map] // key:2 value:b map:[object Map]

Question 25

Q

show using for .. of to iterate a map showing key and value

Answer

A

for ( [key,value] of m ) console.log( key + '=' + value )

// a=1 // b=2

Question 26

Q

Show how to use an map iterator to obtain the entries.

Answer

A

var m = new Map( ) m.set( 'a', 1 ) m.set( 'b', 2 )

var iter = m.keys( ) obj = iter.next(); // obj: {value: "a", done: false} obj =iter.next(); // obj: {value: "b", done: false} obj =iter.next(); // obj: {value: undefined, done: true}

Question 27

Q

Show how to use an iterator with a Map to obtain the values.

Answer

A

var m = new Map( ) m.set( 'a', 1 ) m.set( 'b', 2 )

var iter = m.values( ) obj = iter.next(); // obj: {value: "a", done: false} obj =iter.next(); // obj: {value: "b", done: false} obj =iter.next(); // obj: {value: undefined, done: true}

Question 28

Q

Describe a MAP function

Answer

A

Objects have been used as maps (key value pairs).

Keys can be any type and are placed in the order they were inserted.

Diff between Map and Object

Objects must be string keys, Maps any type Objects are now ordered, but you must find the keys and then iterate.

Maps have a size function.

Example Map: let contacts = new Map() contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"}) contacts.has('Jessie') // true contacts.get('Hilary') // undefined contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"}) contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"} contacts.delete('Raymond') // false contacts.delete('Jessie') // true console.log(contacts.size) // 1

Question 29

Q

Show example of jQuery and AJAX. ( commonly used pre ES6 )

Answer

A

$.ajax("http://services.odata.org/v4/Northwind/Northwind.svc/", { success: function(data) { console.log(data.value); }, error: function( ) { console.log("failed to fetch data") ; } } ) ;

Question 30

Q

Show example of using ES6+ fetch method.

Answer

A

fetch( "http://services/odata.org/V4/Northwind/Northwind.svc/", { method: 'get' } ) . then( function(response) { return response.json(); } ) . then( function(data) { console.log( data.value) ; } ) . catch( function( ) { console.log("failed to fetch data); } ) ;

Question 31

Q

Show a promise constructor.

Answer

A

function add_positivenos_async(n1, n2) { let p = new Promise(function (resolve, reject) { if (n1 >= 0 && n2 >= 0) { //do some complex work resolve(n1 + n2) } else reject('NOT_Postive_Number_Passed')

} ) return p; }

add_positivenos_async(10, 20) .then(successHandler) // if promise resolved .catch(errorHandler);// if promise rejected

add_positivenos_async(-10, -20) .then(successHandler) // if promise resolved .catch(errorHandler);// if promise rejected

function errorHandler(err) { console.log('Handling error', err) }

function successHandler(result) { console.log('Handling success', result) }

Question 32

Q

Show using promise to wrap a jQuery Ajax pattern.

Answer

A

var promise = new Promise( resolve, reject ) {

$.ajax( "http://services.odata.org/V4/Northwind/Northwind.svc/", { success: function (data) { resolve(data); } , error: function( ) { reject("Error"); } }

promise.then (function (result) { console.log( result ); } , function ( err ) { console.log( err ); } ) ;

Question 33

Q

Show example of string repeat

Answer

A

var stg = "SkillBakery ".repeat(2);

stg is "SkillBakery SkillBakery ";

Question 34

Q

String contains has been deprecated. Show how to determine if a string contains a substring.

Answer

A

result: bool = " World ".includes( "rl" ) ;

true

Question 35

Q

What is the method to test the starting of a string.

Answer

A

var x:bool = "SkillBakery ES6" . startsWith( "Skill" ) ;

true

Question 36

Q

What is the method to test the ending of a string.

Answer

A

var x:bool = "SkillBakery ES6" . endsWith( "Bakery" ) ;

false

Question 37

Q

Iterate over a string.

Answer

A

for ( var ch of 'SkillBakery') { console.log( ch ) ; }

Question 38

Q

Show each: how to get the part of the number that left of decimal

test if the number IS a number or not

test if a number if finite or not.

Answer

A

Math.trunc(39.7) // 39

Number.isNaN(45) // false

Number.isFinite(-Infinity) // false

Question 39

Q

How to search an array of strings for a specific entry?

Answer

A

var result = [ "skill", "bakery", "es6", "course" ]. find(x => x == "Bakery");

Question 40

Q

Show how to create an Array using the characters in a string.

Answer

A

var myA = Array.from("this is a test");

Question 41

Q

Show creating an array using passed arguments.

Answer

A

var A = Array.of(42, 16, 20);

Question 42

Q

Show how to overwrite an array from a starting position.

Answer

A

[ 0, 0, 0] . fill( 7, 1 ) starts at position 1: [ 0, 7, 7 ]

Question 43

Q

Find the index of an entry in an Array.

Answer

A

[ 1, 2, 3, 4, 5 ] .findIndex(x => x == 2)

result is 1

Question 44

Q

Show how to copy (overwriting) an array within.

Answer

A

[ 1, 2, 3, 4, 5, 6] .copyWithin( 3, 1 )

says find the entry with value '3' and begin copying AFTER that using the source starting with index == 1 (value '2').

result: [ 1, 2, 3, 2, 3, 4]

Question 45

Q

Show combining one or more source objects.

Answer

A

var destination = { start: 0 }; var source_mid = { interval: 10, duration: 20 } ; var source_end = { distance: 40 }; Object.assign( destination, source_mid, source_end ) ;

destinationis the concatenation of itself and the other arguments.

subsequent changes to sources, do not affect the new destination entries.

Question 46

Q

What is a "template literal"?

Answer

A

ES5 they were called template strings.

They are string literals showing embedded expressions.

`string text`

`string text line 1 string text line 2`

`string text ${expression} string text`

----------------------------------------------------------------------------------

tag`string text ${expression} string text`

If there is an expression preceding the template literal (taghere), this is called atagged template. In that case, the tag expression (usually a function) gets called with the template literal, which you can then manipulate before outputting.

Brainscape's Knowledge GenomeTM

ES6 Javascript Flashcards

Brainscape's Knowledge Genome^TM