... is one syntax with two opposite behaviors, and which one it is depends on where it appears.

Spread — expands

Spread takes an iterable/object and spreads it out into individual pieces. It appears in function calls, array literals, object literals:

// copy / merge arrays
const copy = [...arr];
const merged = [...a, ...b];

// copy / merge objects (later wins)
const newObj = { ...obj, name: "updated" };

// pass an array as individual arguments
Math.max(...[3, 1, 4]); // Math.max(3, 1, 4)

Rest — collects

Rest takes multiple individual items and gathers them into one array/object. It appears in function parameters and destructuring (always last):

// variadic function params
function sum(...nums) {           // nums is a real array
  return nums.reduce((a, n) => a + n, 0);
}

// array destructuring
const [first, ...others] = [1, 2, 3]; // first=1, others=[2,3]

// object destructuring
const { id, ...rest } = user;          // rest = everything except id

The rule of thumb

• On the right side of =, or inside a call/literal → spread (expanding).
• On the left side (destructuring) or in a parameter list → rest (collecting).

The critical caveat: shallow copy

Spread copies one level deep. Nested objects/arrays are still shared by reference:

const copy = { ...original };
copy.nested.x = 1; // ❌ also mutates original.nested

For React state and immutable updates this matters — you must spread every level you change, or use structuredClone / a library for deep copies.

Common uses in React

setItems([...items, newItem]);             // immutable add
setUser({ ...user, name: "new" });         // immutable update
<Component {...props} />                    // spread props

The framing

"Same ..., opposite jobs. Spread expands — in calls and literals, for copying/merging arrays and objects or passing array args. Rest collects — in parameter lists and destructuring, gathering items into one array. Rule: left side / params = rest, right side / calls / literals = spread. The gotcha that bites people is that spread is a shallow copy — nested references are shared, which is why immutable updates have to spread every level you touch."