jskatas.org Continuously Learn JavaScript. Your Way.

Spread operator: with arrays

Spread syntax in use 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

Syntax docs on MDN.

Required Knowledge

Related Katas

Unary Operators

Bitwise Shift Operators

Rest operator

Spread operator

Difficulty Level

INTERMEDIATE

First Published

10 April 2015

Stats

7 tests to solve