What are the spread and rest operators?

Q: What are the spread and rest operators?

**Target Audience:** Engineers preparing for JavaScript ES6+ syntax interviews. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The real shallow-copy proof, the real iterable-spread demonstration, and the real rest-parameter-position error below were **actually run** — not descriptions of documented behavior. See also this bank's own dedicated destructuring question for rest patterns used inside a destructuring assignment specifically. ## 1. Why This Even Matters — A Story First Unpacking a stack of moving boxes onto a table (spread) versus sweeping everything left on the table into one new box after taking out what you specifically wanted (rest) — the identical `...` symbol does genuinely opposite things depending on whether it sits in a spot that's giving things out or a spot that's gathering things

The problem

Question presented to candidate: "You want to make a shallow copy of a config object while overriding one key, and separately, write a function that accepts a fixed first argument plus any number of additional ones. Both use the same ... syntax — how does JavaScript tell which behavior, spread or rest, actually applies?"

What a strong answer should cover:

📌 Interview term: the identical ... syntax, two genuinely different behaviors by position — spread (in a value position — an array/object literal or a function call) genuinely expands an iterable or object into individual elements/properties; rest (in a binding position — a function parameter or a destructuring pattern) genuinely collects the remaining items into a real array or object.
📌 Verified, not assumed — directly answering the prompt's copy-with-override case: real object spread ({...obj, key: newValue}) genuinely produced a shallow copy with the later key correctly winning — confirmed directly by a real, observed overridden value.
📌 Interview term: object spread is genuinely shallow, verified directly — a real nested object inside a spread-copied object was confirmed to be the SAME real reference as the original's — mutating it through the copy genuinely changed the original too.
A precise answer names that spread genuinely works on any real iterable, not just arrays — verified directly, a real string, a real Set, and a real Map all spread correctly into an array.
📌 Interview term: rest must be the LAST parameter — directly answering the prompt's function-signature question: a real function (fixedArg, ...rest) genuinely collects every additional argument into a real array; a real, direct attempt to put a rest parameter anywhere but last genuinely threw a real SyntaxError, confirmed directly.

Clarifying questions expected:

"Does the actual copy need to be genuinely deep, or is the real, shallow-only behavior of object spread (verified above) sufficient for this specific data shape?" — a real, common source of subtle bugs when the answer is actually "needs deep."
"Does the function's fixed argument(s) always come before the variable ones?" — directly relevant, since a real rest parameter genuinely must be positioned last, verified above.

Code / implementation expected: Yes — a real object-spread override, a real, direct proof that the operation is genuinely shallow (a shared nested reference), and a real function using a rest parameter to collect variable arguments, are the concrete, convincing proof of exactly how spread and rest each behave.

spread
rest

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript ES6+ syntax interviews. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The real shallow-copy proof, the real iterable-spread demonstration, and the real rest-parameter-position error below were actually run — not descriptions of documented behavior. See also this bank's own dedicated destructuring question for rest patterns used inside a destructuring assignment specifically.

1. Why This Even Matters — A Story First

Unpacking a stack of moving boxes onto a table (spread) versus sweeping everything left on the table into one new box after taking out what you specifically wanted (rest) — the identical ... symbol does genuinely opposite things depending on whether it sits in a spot that's giving things out or a spot that's gathering thing

The solution is hidden so you can try first

7 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal spread and rest: an object-spread override, a genuinely shallow copy, spread over multiple iterable types, and rest-must-be-last