Shorthand

Question 1

concise property initializers

Answer 1

function xyzzy(foo, bar, qux) {
return {
foo,
bar,
qux,
};
}

In each case, we merely use the name of the property we want to initialize, and JavaScript looks for a variable with the same name to use as the initial value.

Question 2

concise methods

Answer 2

let obj = {
foo() {
// do something
},

bar(arg1, arg2) {
// do something else with arg1 and arg2
},
}
//The new concise method syntax lets you eliminate the : and the word function:

Question 3

object destructuring

Answer 3

let obj = {
foo: “foo”,
bar: “bar”,
qux: 42,
};

let foo = obj.foo;
let bar = obj.bar;
let qux = obj.qux;

//or
let { foo, bar, qux } = obj;

Question 4

renaming the variables in object destructuring

Answer 4

let { qux: myQux, foo, bar } = obj;
//This example creates a myQux variable that receives the value of obj.qux

Question 5

destructuring with function parameters

Answer 5

function xyzzy({ foo, bar, qux }) {
console.log(qux); // 3
console.log(bar); // 2
console.log(foo); // 1
}

let obj = {
foo: 1,
bar: 2,
qux: 3,
};

xyzzy(obj);

Question 6

object destructuring as an assignment to existing variables

Answer 6

{ foo, bar, qux } = obj;
//will produce an error, { marks the beginning of a block rather than destructuring.
Instead:
({ foo, bar, qux } = obj);

Question 7

array destructuring

Answer 7

let foo = [1, 2, 3];
let [ first, second, third ] = foo;

Question 8

skipping elements in an array destructuring

Answer 8

let bar = [1, 2, 3, 4, 5, 6, 7];
let [ first, , , fourth, fifth, , seventh ] = bar;

Question 9

using array destructuring to perform multiple assignments in a single expression

Answer 9

let one = 1;
let two = 2;
let three = 3;

let [ num1, num2, num3 ] = [one, two, three];

console.log(num1); // 1
console.log(num2); // 2
console.log(num3); // 3

Question 10

how can we use spread syntax with the argument to a function

Answer 10

function add3(item1, item2, item3) {
return item1 + item2 + item3;
}

let foo = [3, 7, 11];

add3(…foo); // => 21

Question 11

using spread to clone or concat arrays

Answer 11

// Create a clone of an array
let foo = [1, 2, 3];
let bar = […foo];
console.log(bar); // [1, 2, 3]
console.log(foo === bar); // false – bar is a new array

// Concatenate arrays
let foo = [1, 2, 3];
let bar = [4, 5, 6];
let qux = […foo, …bar];
qux; // => [1, 2, 3, 4, 5, 6]

Question 12

What does spread return with objects

Answer 12

Spread syntax with objects only returns the properties thatObject.keyswould return. That is, it only returns enumerable “own” properties. That means, in part, that it’s not the right choice when you need to duplicate objects that inherit from some other object. It also means that you lose the object prototype.

Question 13

using spread to clone an object

Answer 13

// Create a clone of an object
let foo = { qux: 1, baz: 2 };
let bar = { …foo };
console.log(bar); // { qux: 1, baz: 2 }
console.log(foo === bar); // false – bar is a new object

Question 14

What does rest syntax do?

Answer 14

Rest syntax collects multiple items into an array or object

Question 15

how do we use rest syntax with arrays?

Answer 15

//With Arrays
let foo = [1, 2, 3, 4];
let [ bar, …otherStuff ] = foo;
console.log(bar); // 1
console.log(otherStuff); // [2, 3, 4]

Question 16

how do we use rest syntax with objects?

Answer 16

//With Objects
let foo = {bar: 1, qux: 2, baz: 3, xyz: 4};
let { bar, baz, …otherStuff } = foo;
console.log(bar); // 1
console.log(baz); // 3
console.log(otherStuff); // {qux: 2, xyz: 4}

Question 17

where must a rest element be located?

Answer 17

The rest element (otherStuffin both examples) must be the last item in any expression that uses rest syntax.

Question 18

how do we use rest syntax with a function which takes an arbitrary number of parameters?

Answer 18

function maxItem(first, …moreArgs) {
let maximum = first;
moreArgs.forEach(value => {
if (value > maximum) {
maximum = value;
}
});

return maximum;
}

console.log(maxItem(2, 6, 10, 4, -3));