ES6

Question 1

What three new methods does ES6 introduce for identifying whether a given string contains a substring?

Answer 1

includes(), startsWith() and endsWith() // These won’t work with regular expressions

Question 2

What are tagged template literals?

Answer 2

Functions that receive pieces of a template literal as arguments which you can manipulate and return as html.

Question 3

How can you easily clone an array using rest parameters?

Answer 3

let […clonedArray] = myArray;

Question 4

For function doSomething () { … } how can you get the name “doSomething” from within or without the function?

Answer 4

doSomething.name

Question 5

How can you make sure a function was called with the ‘new’ keyword?

Answer 5

if (typeof new.target !== ‘undefined’) { // the function was called using new. This is better than checking if this instanceof Person, for example.

Question 6

Make an arrow function into an immediately invoked function: (value) => {
doSomething(value)
return value;
}

Answer 6

Wrap in parens: ((value) => {…})(‘Something’)

Question 7

What’s a tail call?

Answer 7

When a function is called as the last statement in another function the compiler has trouble optimizing.

Question 8

How can you optimize for tail calls when they are necessary?

Answer 8

Don’t require access to variables in the current stack frame (the function can’t be a closure); the function making the tail call has no more work todo after the tail call returns; the result of the tail call is returned as the function value.

Question 9

How does Object.is() work?

Answer 9

Accepts 2 arguments and returns true if they are the same type and value. Object.is(NaN, NaN); // true

Question 10

How does Object.assign() work?

Answer 10

Object.assign(receiver, supplier); It takes two objects and adds the properties/values from supplier to receiver. It modifies receiver.

Question 11

What does the super() method do? How does it work?

Answer 11

‘super’ is a pointer to the current object’s prototype. It’s like saying Object.getPrototypeOf(this). It must be inside a ‘concise’ method to work.

Question 12

What is a concise method of an object literal?

Answer 12

Instead of var person = { getAge: function() { … } we can say var person = { getAge() { … } ,

Question 13

Why send destructured parameters to a function? What does this mean/do?

Answer 13

It helps clarify what the function requires: 
function myFunction (name, value, { url, filename, size }  = { } ) { ... } // Note: the parameters are required if you don't set a default

Question 14

Add newItem onto the end of array someArray using spread operator

Answer 14

[ …someArray, newItem ]

Question 15

How to make this work:

var a, b;
{a, b} = {a: 1, b: 2};

Answer 15

Move the destructing into parenthesis:
var a, b;
({a, b} = {a: 1, b: 2});

or use let/const/var

var {a, b} = {a: 1, b: 2};

Question 16

Using destructing a variable can be assigned a default, in the case that the value unpacked from the object is undefined. How to do this?

Answer 16

var {a = 10, b = 5} = {a: 3};

console. log(a); // 3
console. log(b); // 5

Question 17

var {a:aa = 10, b:bb = 5} = {a: 3};

what does this mean?

Answer 17

It’s an assigning to new variables names and providing default values

console. log(aa); // 3
console. log(bb); // 5

Question 18

How to unpack User in whois parameter?

function whois(???) {
  console.log(displayName + ' is ' + name);
}

var user = { 
  id: 42, 
  displayName: 'jdoe',
  fullName: { 
      firstName: 'John',
      lastName: 'Doe'
  }
};

Answer 18

The args should be
{displayName, fullName: {firstName: name}}

i.e. function whois({displayName, fullName: {firstName: name}}) {
console.log(displayName + ‘ is ‘ + name);
}

Question 19

Give an example of computed object property names in destructuring

Answer 19

let key = 'z';
let {[key]: foo} = {z: 'bar'};

console.log(foo); // “bar”

Question 20

Is it possible to use Rest in Object Destructuring

Answer 20

For arrays:
var [a, …b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

The Rest/Spread Properties for ECMAScript proposal (stage 3) adds the rest syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

Question 21

What will be printed?

function print(a, b, ...c) {
    console.log(a); 
    console.log(b); 
    console.log(c); 
}

print(…[3], …[1, 2, 12]);

Answer 21

3
1
[ 2, 12 ]

Question 22

For the following function
function print(a, b, ...c) {
    console.log(a); 
    console.log(b); 
    console.log(c); 
}

what would be printed in case 
x = [0, 5]; print([12, ...x, 10]);
and
x = [0, 5]; print(...[12, ...x, 10]);
?

Answer 22

[ 12, 0, 5, 10 ]
undefined
[]

vs

12
0
[ 5, 10 ]

Question 23

What’d be in console?

x = [0, 5];

console. log(“Array: ${x[0]}, ${x}”);
console. log(‘Array: ${x[0]}, ${x}’);
console. log(Array: ${x[0]}, ${x});

Answer 23

Array: ${x[0]}, ${x}
Array: ${x[0]}, ${x}
Array: 0, 0,5

Template literals require ‘ticks’ - ` symbol

Question 24

What’d be printed for custom tag like this:

console.log(lowerTag ${1} + ${2} EQUALS ${1+2});

let lowerTag = function (strings, ...values) {
    let result = "";
    strings.forEach((s, i) => {
        result += s;
        if(i < values.length)
            result += values[i];
    });

return result.toLowerCase(); }

Answer 24

1 + 2 equals 3

Question 25

В чем отличия for .. in и for .. of ?
Что выведет код:
let arr = [ 3, 5, 7 ];
arr.foo = “hello”;

for (let i in arr) {
console.log(i); // выведет ???
}

for (let i of arr) {
console.log(i); // выведет ???
}

Answer 25

Следующий пример показывает различия циклов for…of и for…in. В то время как for…in обходит имена свойств, for…of выполняет обход значений свойств:

let arr = [ 3, 5, 7 ];
arr.foo = "hello";

for (let i in arr) {
console.log(i); // выведет “0”, “1”, “2”, “foo”
}

for (let i of arr) {
console.log(i); // выведет “3”, “5”, “7”
}

Question 26

Что такое генератор?

Answer 26

То же что Enumerator в c#
var gen = function*()
{
    yield 100;
    yield 200;
    yield 300;
}

Question 27

Как итерироваться по массиву без for of?

Answer 27

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);

currentValue
Текущий обрабатываемый элемент в массиве.

index Необязательный
Индекс текущего обрабатываемого элемента в массиве.
array Необязательный
Массив, по которому осуществляется проход.

thisArg
Необязательный параметр. Значение, используемое в качестве this при вызове функции callback.

Примечание: Не существует способа остановить или прервать цикл forEach() кроме как выбрасыванием исключения. Если это требуется, метод forEach() неправильный выбор. Используйте обычные циклы. Если нужно протестировать элементы массива на условие и нужно вернуть булевое значение, вы должны воспользоваться методами Array.prototype.every() или Array.prototype.some().

Question 28

Простой способ использовать forEach на множестве document.querySelectorAll(‘a’)

Answer 28

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});

Question 29

What are three roles (patterns) of generators?

Answer 29

Generators can play three roles:

Iterators (data producers): Each yield can return a value via next(), which means that generators can produce sequences of values via loops and recursion. Due to generator objects implementing the interface Iterable (which is explained in the chapter on iteration), these sequences can be processed by any ECMAScript 6 construct that supports iterables. Two examples are: for-of loops and the spread operator (…).
Observers (data consumers): yield can also receive a value from next() (via a parameter). That means that generators become data consumers that pause until a new value is pushed into them via next().
Coroutines (data producers and consumers): Given that generators are pausable and can be both data producers and data consumers, not much work is needed to turn them into coroutines (cooperatively multitasked tasks).

Question 30

What ES6 language constructs dot support generators?

Answer 30

First, the for-of loop:

for (const x of genFunc()) {
    console.log(x);
}
// Output:
// a
// b
Second, the spread operator (...), which turns iterated sequences into elements of an array (consult the chapter on parameter handling for more information on this operator):

const arr = [...genFunc()]; // ['a', 'b']
Third, destructuring:

> const [x, y] = genFunc();
> x
'a'
> y
'b'

Question 31

How many “results” genObj.next() can produce?

Answer 31

3:

• For an item x in an iteration sequence, it returns { value: x, done: false }
• For the end of an iteration sequence with a return value z, it returns { value: z, done: true }
• For an exception that leaves the generator body, it throws that exception.

Question 32

How to make recursion call of a generator?

Answer 32

function* bar(i) {
    if(i > 1)
        return '---';
    yield 'x';
    yield* bar(++i);
    yield 'y';
}

for (let i of bar(0)) {
console.log(i);
}

Question 33

Что выведет код
function* bar(i) {
    if(i > 1)
        return '---';
    yield 'x';
    yield* bar(++i);
    yield 'y';
}

for (let i of bar(0)) {
console.log(i);
}

Answer 33

x
x
y
y

Question 34

Create a class with binary tree and a function to iterate through it

Answer 34

class BinaryTree {
    constructor(value, left=null, right=null) {
        this.value = value;
        this.left = left;
        this.right = right;
    }

    /** Prefix iteration */
    * [Symbol.iterator]() {
        yield this.value;
        if (this.left) {
            yield* this.left;
            // Short for: yield* this.left[Symbol.iterator]()
        }
        if (this.right) {
            yield* this.right;
        }
    }
}

const tree = new BinaryTree('a',
    new BinaryTree('b',
        new BinaryTree('c'),
        new BinaryTree('d')),
    new BinaryTree('e'));

for (const x of tree) {
console.log(x);
}

Question 35

Как добавить в объект “итерацию по умолчанию”?

Answer 35

The Symbol.iterator well-known symbol specifies the default iterator for an object. Used by for…of.

const iterable1 = new Object();

iterable1[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

console.log([…iterable1]);