Lesson 14 of 80

Spread & Rest

Q: The same `...` syntax means different things in different positions — explain spread vs rest, and the shallow-copy gotcha with objects.

A strong answer covers: Spread expands an iterable/object out into individual elements or properties; rest gathers remaining elements/args into one array; Object/array spread is a shallow copy — nested objects are shared by reference, not cloned; Rest parameters produce a real array (unlike the array-like `arguments` object) and must be the last parameter.

The same `...` syntax means opposite things depending on which side of an assignment it's on — spreading one value out, or gathering many into one.

10 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

Why does `function sum(...nums) { return nums.map(n => n * 2); }` work, while the equivalent using the old `arguments` object (`arguments.map(...)`) throws?

Rest parameters create a real array; arguments is only array-like and lacks array methodsarguments doesn't exist unless you declare it as a parametermap only works inside arrow functions

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Spread & Rest

What interviewers actually ask about this, and what a strong answer has to cover.

The same `...` syntax means different things in different positions — explain spread vs rest, and the shallow-copy gotcha with objects.

A strong answer covers

Spread expands an iterable/object out into individual elements or properties; rest gathers remaining elements/args into one array
Object/array spread is a shallow copy — nested objects are shared by reference, not cloned
Rest parameters produce a real array (unlike the array-like `arguments` object) and must be the last parameter

Likely follow-ups

How would you safely update a deeply nested piece of state without spreading at every level manually?
Why is { ...defaults, ...overrides } the standard pattern for merging config, and what happens if you reverse the order?
Where does spread show up in React state updates, and why does it matter that it's shallow there specifically?

Practice these with the AI interviewer →

The plain-language idea

... is one piece of syntax with two jobs, told apart by context:

Spread — expands an iterable or object out into individual elements/properties.
Rest — gathers the remaining elements/arguments into one array or object.

// spread: one thing -> many
const a = [1, 2];
const b = [...a, 3];        // [1, 2, 3] — a new array, a is untouched
const merged = { ...defaults, ...overrides }; // later keys win on conflict

// rest: many things -> one
function sum(...nums) {     // nums is a real array, unlike arguments
  return nums.reduce((t, n) => t + n, 0);
}
const [first, ...rest] = [1, 2, 3]; // first -> 1, rest -> [2, 3]

Spread on an object only copies own, enumerable, top-level properties — it's a shallow copy, exactly like Object.assign({}, source).

Spread expands out; rest gathers inStep 1 of 3

Spread: [...a, 3] expands a's items OUT into a brand-new array.

What people usually miss

Watch out

Spread copies are shallow. { ...user, address: user.address } still shares the same nested address object — mutating it affects both. Nested objects need their own spread to actually be independent.
Rest must be the last parameter. function f(...args, last) is a SyntaxError — the engine needs to know rest is scooping up everything that's left, which only makes sense at the end.
arguments vs rest params: arguments is an array-like object with no array methods (no .map, .filter) and doesn't exist in arrow functions at all; ...args is a real array and works everywhere.

Why this matters in interviews

Object/array spread for immutable updates ({ ...state, loading: true }) is the backbone of React state updates and Redux reducers — recognizing when a spread copy is shallow versus when you actually needed a deep clone is a very common real-world bug source interviewers probe for.