Rest and Spread

JavaScript provides two related operators that use the ... syntax: rest to collect multiple elements into an array and spread to expand an iterable object into individual elements. Iterable objects include Arrays, Strings, and even Objects.

Rest Parameters

The rest parameter syntax collects multiple elements into an array. You can use it in array destructuring to gather remaining elements after extracting specific ones:

const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;

Here, a gets 1, b gets 2, and rest becomes an array containing the remaining values [3, 4, 5].

Rest also works with object destructuring to collect remaining properties:

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;  
// a = 1, rest = { b: 2, c: 3 }

// The remaining properties depend on what you extract first
const { b, ...remaining } = obj;  
// b = 2, remaining = { a: 1, c: 3 }

You can also use rest parameters in functions to collect any number of arguments into an array:

function sum(...args) {
    return args.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3));  // 6

In this example, calling sum(1, 2, 3) collects all arguments into the args array [1, 2, 3], which we can then process as a single unit.

Array Spread

Spread syntax lets you expand an array into its individual elements. For example, you can use spread to insert all elements from one array into another:

const numbers = [1, 2, 3, 4, 5];
const moreNumbers = [0, ...numbers, 6, 7];  // [0, 1, 2, 3, 4, 5, 6, 7]

Spread is often used to create a copy of an array, just spread all its elements into a new array definition:

const copy = [...numbers];  // [1, 2, 3]

You can combine multiple arrays by spreading them all into a new array:

const numbers1 = [1, 2];
const numbers2 = [3, 4];
const combined = [...numbers1, ...numbers2];  // [1, 2, 3, 4]

String Spread

You can also spread a string to split it into an array of individual characters:

const greeting = "Hello";
const chars = [...greeting];  
// ["H", "e", "l", "l", "o"]

Object Spread

Spread also works with objects since they're also iterable. For example, you can add a new property while keeping all existing properties:

const user = { name: "Sam", age: 20, isAdmin: true };
const details = { ...user, role: "editor" };  
// { name: "Sam", age: 20, isAdmin: true, role: "editor" }

When spreading objects with overlapping properties, later properties override earlier ones. You can set new values directly in the spread, or spread another object containing the updates:

// Set new values directly
const updated = { ...user, age: 21, isAdmin: false };  
// { name: "Sam", age: 21, isAdmin: false }

// Use a separate updates object
const updates = { age: 21, isAdmin: false };
const updated2 = { ...user, ...updates };  
// { name: "Sam", age: 21, isAdmin: false }

Just like arrays, you can use the spread operator to create a copy of an object:

const userCopy = { ...user };  
// { name: "Sam", age: 20, isAdmin: true }

💡 Rest collects elements into an array, while spread expands an array into elements. Think of rest as gathering (...rest of the items) and spread as scattering (...spread them out).

External Resources

• 📚 MDN: Spread Syntax ↗️
• 📚 MDN: Rest Parameters ↗️