Skip To Content
Javascript

Spread and Rest

The Spread operator is represented by three dots, such as .... Its basic use is to read over lists of values or properties, such as for objects and arrays. This translates into two basic uses:

Copying and Overwriting Array/Object Values #

If you have an array or object, you can use a Spread operator to quickly copy all the values over to another variable. This lets you selectively overwrite different properties and values for objects.

// For Arrays
const array = [1, 2, 3, 4];
const newArray = [...array, 5, 6, 7];
// [1, 2, 3, 4, 5, 6, 7]

// Combining two arrays
const hugeArray = [...array, ...newArray];
// [1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7];

// For Objects
const profile = {
name: Chris Sandwich,
age: 25,
occupation: Falsetto Marauder,
dead: true
};

// This copies over 'profile', and optionally changes/adds on this new object's properties
const newProfile = {
...profile,
name: Activia Barleyfoot,
dead: false
}

Taking Multiple Arguments #

When defining a function, you can set a Spread operator as a parameter to define a list of values of unspecified length.

function example(...arguments) { ... }

example(1, 2, 3);
example(1, 2, 3, 4, 5); // In both examples, 'arguments' is an array of these values

You can then treat arguments as an array with things like .filter or .reduce. You can also place other paramters before it that aren't Spread operators.

function example(first, second, ...arguments) { ... }

example(1, 2); // arguments is undefined
example(1, 2, 3, 4); // arguments is [3, 4]

This is great if you need an unspecified number of optional values for a function, while including some regular named arguments first.

The above example technically is an example of the Rest operator, which uses the same syntax but has a different function.

The Rest Operators #

While Spread expands all properties or items into a single argument, Rest is used to capture any remaining items or properties. Spread "spreads them all out," and Rest "gathers up the rest."

const people = ["Arnie", "Chunt", "Usidore", "Flower", "Krom"];
const ["Arnie", "Chunt", "Usidore", ...guests] = people;

console.log(guests); // ["Flower", "Krom"]

You can use destructuring with Rest to remove object properties. You can assign it to a new variable this way:

const activia = {
name: 'Activia Barleyfoot',
age: 25,
occupation: 'Falsetto Marauder',
dead: true
};

const { dead, ...aliveActivia } = activia;
console.log(aliveActivia);

It can also be done with a function.

const notDead = ({ dead, ...character }) => character;
const activia = {
name: 'Activia Barleyfoot',
age: 25,
occupation: 'Falsetto Marauder',
dead: true
};

notDead(activia);

You can even use a currier function and dynamic destructuring to generate functions to remove different properties.

const activia = {
name: 'Activia Barleyfoot',
age: 25,
occupation: 'Falsetto Marauder',
dead: true
};

const removeProperty = prop => ({ [prop]: _, ...rest }) => rest;
const bringToLife = removeProperty('dead');

bringToLife(activia);

Resources