Spread Operator

The spread / rest operator (...) is a common, modern JavaScript syntax introduced in ECMAScript version 6.

The ... syntax in JavaScript does a couple different things. Personally this always gets referred to as the 'spread operator' but in reality it is called two things:

• 'Spread operator' - takes in an Iterable and 'spread's it into a function call
• 'Rest parameters' - takes in an Iterable, and condenses remaining elements not yet destructured into a single element.

Spread operator

The spread syntax unpacks an Iterable into positional arguments for a function.

// This function takes in a bunch of positional arguments.
function sum(a, b, c) {
	return a + b + c;
}

const numbers = [1, 2, 3];

// 6
sum(...numbers);

Destructuring

Destructuring is a flavor of JavaScript syntax for unpacking values from objects and arrays.

Basic usage

const prices = { banana: 2.5, apple: 1.6 };
const { banana, apple } = prices;

// 2.5
console.log(banana);

const scores = [99, 70, 65];
const [ scoreOne, scoreTwo, scoreThree ] = scores;

// 70
console.log(scoreTwo);

Rest parameters

Note

Rest parameters can only ever be the last element.

With the ... operator Using the ... operator here is called a rest parameter or a rest element.

const prices = { banana: 2.5, apple: 1.6, tomato: 1.9 };
const { apple, ...otherPrices } = prices;

// { banana: 2.5, tomato: 1.9 }
console.log(otherPrices);

Renaming elements

const prices = { banana: 2.5, apple: 1.6, tomato: 1.8 };

// bestFruit = 1.6
const { apple: bestFruit } = fruit;

// You can use this with defaults as well!
// coolVegetable = 1
const { cucumber: coolVegetable = 1 } = fruit;

Destructuring arrays

const alphabet = [ 'a', 'b', 'c', ..., 'z' ];

// a = 'a'
const [ a, ...remaining ] = alphabet;

// This actually works perfectly fine for strings, too, since they are iterables.
const alphabetString = 'abcdefg...z';

// a = 'a'
const [ a, ...rest ] = alphabetString;

In functions

const processLotsOfStuff = ({ thing, another, aThird, wow }) => {
	...
}

function processLotsOfStuff({ thing, another, aThird, ...others }) => {
	...
}

const processWithDefaults = ({ thing=null, another='hi', ...rest }) => {
	...
}

Shorthand property assignments are valid only in destructuring patterns

// This arrow function is missing its arrow, the error is not helpful :)
const test = ({ a = 1, b = 2, c = 3 }) {
	...
}

Invalid usages

const alphabet = ['a', 'b', 'c', ..., 'z'];

// Uncaught SyntaxError: Rest element must be last element
// You can't use this to grab the last element, or any in the middle.
const [ ...first, z ] = alphabet;

// Uncaught SyntaxError: Invalid destructuring assignment target
// You can't assign a default to a rest parameter.
const [ first, ...rest = [ 'x', 'y' ] ] = alphabet;

Spread vs Rest syntax