Spread and Rest Operators in JavaScript

Analogy categoryAnalogies

1. Introduction

The ... syntax in JavaScript serves two related but opposite purposes depending on context. As the spread operator, it expands (spreads out) the elements of an array or the properties of an object into a new array, object, or argument list. As the rest operator, it does the reverse — it collects multiple remaining elements or arguments into a single array or object.

🏏

Cricket analogy: Think of the ... syntax like a team sheet: spreading is announcing India's XI one by one onto the scorecard, while resting is Ravi Shastri gathering the last three unused substitutes into a single reserves list.

2. Syntax

javascript

// Spread: expanding values
const merged = [...arr1, ...arr2];
const copy = { ...original };
Math.max(...numbers);

// Rest: collecting values
function sum(...nums) { /* nums is an array */ }
const [first, ...rest] = [1, 2, 3];
const { a, ...others } = { a: 1, b: 2, c: 3 };

3. Explanation

Spread is used on the "source" side of an expression — inside an array literal, object literal, or function call — to unpack an iterable's elements or an object's own enumerable properties. It's commonly used to concatenate arrays, merge objects, copy a collection, or pass an array's elements as individual function arguments.

🏏

Cricket analogy: Spread merges Mumbai Indians' and Chennai Super Kings' squad lists into one combined array by unpacking each player individually into the new roster, useful when comparing two IPL franchises' rosters.

Rest is used on the "destination" side — inside a function parameter list or a destructuring pattern — to gather any number of remaining values into a single array (for arrays/parameters) or object (for objects). Rest must always be the last item in its pattern or parameter list.

🏏

Cricket analogy: Rest is how a captain, after naming the top three batsmen individually, gathers every remaining player into one single middle-and-lower-order group at the end of the announcement.

Gotcha: spread produces only a shallow copy. Top-level properties are duplicated, but if a property's value is itself an object or array, the copy still shares a reference to that same nested object — mutating a nested value through the copy will also change the original.

4. Example

javascript

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

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2);

const original = { name: 'Dana', address: { city: 'Austin' } };
const copy = { ...original };
copy.name = 'Eli';
copy.address.city = 'Dallas';

console.log(original.name);
console.log(original.address.city);

5. Output

text

10
[ 1, 2, 3, 4, 5 ]
Dana
Dallas

6. Key Takeaways

Spread (...) expands an array or object's contents into a new array, object, or argument list.
Rest (...) collects remaining function arguments or destructured values into a single array or object.
Spread and rest share the same syntax but are distinguished by context: spread appears in a value position, rest in a binding/parameter position.
Spread copies are shallow — nested objects/arrays remain shared references between the original and the copy.
The rest parameter/pattern must always come last in its parameter list or destructuring pattern.