Spread operator: with arrays

Spread syntax with arrays

basically

expands the items of an array by prefixing it with ...

const middle = [1, 2, 3]; const arr = [0, middle, 4]; assert.deepEqual(arr, [0, 1, 2, 3, 4]);

an empty array expanded is no item

const arr = [0, [], 1]; assert.deepEqual(arr, [0, 1]);

is (in a way) the opposite to the rest syntax

both use ... to either expand all items and collect them

const [...rest] = [...[,1, 2, 3, 4, 5]]; assert.deepEqual(rest, [1, 2, 3, 4, 5]);

rest syntax must be last in an array, spread can be used in any place

const [a, b, ...rest] = [1, [2, 3], 4, 5]; assert.equal(a, 1); assert.equal(b, 2); assert.deepEqual(rest, [3, 4, 5]);

used as function parameter

prefix with ... to spread as function params

const magicNumbers = [1, 2]; const fn = (magicA, magicB) => { assert.deepEqual(magicA, magicNumbers[0]); assert.deepEqual(magicB, magicNumbers[1]); }; fn(magicNumbers);

pass an array of numbers to Math.max()

const max = Math.max(...[23, 0, 42, 43]); assert.equal(max, 42);

used as constructor parameter

just like in a function call (is not possible using apply)

class X { constructor(a, b, c) { return [a, b, c]; } } const args = [1]; assert.deepEqual(new X(...args), [1, 2, 3]);

Links

mdn docs Syntax docs on MDN.

Required Knowledge

• `const` declaration (Block scope)
• array (Destructuring)
• with destructuring (Rest operator)

Related Katas

Unary Operators

• All unary operators
• Unary "+" operator
• Unary "+" operator in depth

Bitwise Shift Operators

• Left Shift "<<"
• Right Shift ">>"
• All bitwise shift operators

Rest operator

• as parameter
• with destructuring

Spread operator

• with arrays
• with strings

Difficulty Level

INTERMEDIATE

First Published

10 April 2015

Stats

7 tests to solve