Part 1 Flashcards
Must you explicitely type variables?
No,
var i = 0;
OR
i = 0;
OR
i = { }
which means you can assign them to another type.
how is var scoped
Function unless there is no function in which case it is global
how is let scoped
Block as in between the curly braces
let i = 10;
if (i == 10) {
let i = 5;
console.log(i);
{
console.log (i);
What is the output from this?
5
10
because the let in side the curly braces is scoped within the curly braces.
Is “let” hoisted inside a function?
No, if it is referenced before it is declared, you get an error.
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
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 }
What are REST parameters?
indicates the “rest of” the parameters :-)
Input: function example( first, last, …details);
This is the opposite of “Spread” parameters.
What are spread parameters?
The opposite of REST parameters, the Spread the argument out in a statement as here:
function example(message, ...parms) { \<-- parms is rest here
console.log(message, ...parms); \<-- parms is spread here
Show an example of a tail call?
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.
Given variables a and b and then an array: ara = [‘first’, ‘second”],
show a destructured assignment leaving a = ‘first’, and b= ‘second’.
[a, b] = …ara;
OR
[a, b] = [‘first’, ‘second’]
[a, b, …rest] = [‘first, ‘second’, 30, 40, 50];
here rest becomes [30, 40, 50]
What happens in ES6+ for the following destructuring of variables from objects?
var course = { name: “French”, publisher: “Louis” };
function crsDetails( course ) {
let { name, publisher, price } = course;
...
ES6+ at least recognizes it as an error since price can’t be set.
Show how to mark a parameter is optional in a destructured expression that follows: (price is optional)
let { name, publisher, price } = c;
let { name, publisher, ?price } = c;
Difference between for .. of and for .. in operators.
for …of use to iterate over interables (arrays).
for …in use to iterate over properties of an object.
How to retrieve value(s) from a generator such as:
function \* generatorFunction( ) {
yield 'a';
yield 'b';
return 'c';
yield 'd';
}
What happens when it is called four times.
Calling
var x = generatorFunction( );
will return ‘a’, then ‘b’, then returns with the done property set to true.
What type of object is returned by a generator function?
{ value: any, done: boolean }
let s = new Set( [10, 20, 30] );
s.add( 20 );
What will happen?
20 will not be added again because it is already there.
How to remove entry ‘20’ from a set ‘s’.
s.delete( 20 );
Show using a Map iterator to get map entry contents.
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
Show how to set a map entry.
Console.log( show if value was set );
myMap = new Map(); ... myMap.set( name**,**'first' );
console.log( myMap.has(keyvalue) ); // true of false
show how to empty a map.
map.clear( );
show how to delete a specific map entry
map.delete( key );
Show how to get the value of a map given a key
myValue = map.get( key );
Show how to test for a specific key value in a map.
map.has( key );
show how to interate over a map and show the key, value, and map.
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]
show using for .. of to iterate a map showing key and value
for ( [key,value] of m )
console.log( key + ‘=’ + value )
// a=1 // b=2
Show how to use an map iterator to obtain the entries.
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}
Show how to use an iterator with a Map to obtain the values.
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}
Describe a MAP function
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
Show example of jQuery and AJAX. ( commonly used pre ES6 )
$.ajax(“http://services.odata.org/v4/Northwind/Northwind.svc/”, {
success: function(data) {
console. log(data.value);
* *} ,**
error: function( ) {
console. log(“failed to fetch data”) ;
* *}**
* *} ) ;**
Show example of using ES6+ fetch method.
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) ;
} ) ;
Show a promise constructor.
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)
}
Show using promise to wrap a jQuery Ajax pattern.
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 );
} ) ;
Show example of string repeat
var stg = “SkillBakery “.repeat(2);
stg is “SkillBakery SkillBakery “;
String contains has been deprecated. Show how to determine if a string contains a substring.
result: bool = “ World “.includes( “rl” ) ;
true
What is the method to test the starting of a string.
var x:bool = “SkillBakery ES6” . startsWith( “Skill” ) ;
true
What is the method to test the ending of a string.
var x:bool = “SkillBakery ES6” . endsWith( “Bakery” ) ;
false
Iterate over a string.
for ( var ch of ‘SkillBakery’) {
console.log( ch ) ;
}
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.
Math.trunc(39.7) // 39
Number.isNaN(45) // false
Number.isFinite(-Infinity) // false
How to search an array of strings for a specific entry?
var result = [“skill”, “bakery”, “es6”, “course”]. find(x => x == “Bakery”);
Show how to create an Array using the characters in a string.
var myA = Array.from(“this is a test”);
Show creating an array using passed arguments.
var A = Array.of(42, 16, 20);
Show how to overwrite an array from a starting position.
[0, 0, 0] . fill( 7, 1 ) starts at position 1: [0, 7, 7]
Find the index of an entry in an Array.
[1, 2, 3, 4, 5] . findIndex(x => x == 2)
result is 1
Show how to copy (overwriting) an array within.
[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]
Show combining one or more source objects.
var destination = { start: 0 };
var source\_mid = { interval: 10, duration: 20 } ;
var source\_end = { distance: 40 };
Object.assign( destination, source_mid, source_end ) ;
destination is the concatenation of itself and the other arguments.
subsequent changes to sources, do not affect the new destination entries.
What is a “template literal”?
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
tagstring text ${expression} string text
If there is an expression preceding the template literal (tag here), this is called a tagged template. In that case, the tag expression (usually a function) gets called with the template literal, which you can then manipulate before outputting.
