Spread vs Rest Operator: What Is the Difference?
Learn the difference between the spread and rest operators in JavaScript, with clear examples for arrays, objects, and function parameters.
Expected Interview Answer
The spread operator (...) expands an iterable or object into its individual elements at a call site, array literal, or object literal, while the rest operator uses the identical syntax to do the opposite — it collects multiple remaining elements or arguments back into a single array or object.
Spread is used where you have one collection and want to unpack it: spreading an array into function arguments, merging two objects into a new one, or cloning an array shallowly. Rest is used where you have many individual values and want to gather them: collecting extra function parameters into an array, or pulling remaining object properties out during destructuring. JavaScript disambiguates purely by position — spread appears on the right-hand side supplying values into a target, while rest appears on the left-hand side of an assignment or in a parameter list receiving values. Because both reuse the same three-dot token, interviewers often ask you to identify which one is in play in a given snippet, so anchoring on direction (unpacking vs collecting) is the fastest way to reason about it.
- Spread enables immutable updates by shallow-cloning arrays/objects instead of mutating them
- Rest replaces the old arguments object with a real, typed array of extra parameters
- Both eliminate verbose Array.prototype.slice/concat or Object.assign boilerplate
- Destructuring with rest cleanly separates “the fields I want” from “everything else”
AI Mentor Explanation
Spread is like tipping an entire kit bag onto the ground so every bat, pad, and glove becomes its own separate item on the field. Rest is the opposite: a manager sweeping up whatever gear the players did not claim into one leftover bag labeled extras. The same gesture — dumping items out or scooping them together — depends only on whether you are unpacking a bag or filling one. That directional difference is exactly how JavaScript tells spread and rest apart despite sharing identical dots.
Step-by-Step Explanation
Step 1
Identify the position
Check whether the "..." appears on the right side supplying values (spread) or on the left side/parameter list receiving values (rest).
Step 2
Spread: unpack a source
Use it to expand an array/object into a new array, object, or argument list, e.g. [...arr1, ...arr2] or {...obj, extra: 1}.
Step 3
Rest: collect the remainder
Use it in function parameters or destructuring to gather leftover values into one array/object, e.g. function f(a, ...rest) or const {a, ...others} = obj.
Step 4
Watch the shallow-copy caveat
Both only shallow-clone — nested objects/arrays are still shared by reference after a spread.
What Interviewer Expects
- Clear articulation that syntax is identical but direction/position differs
- Concrete examples of spread (arrays, objects, function calls) and rest (params, destructuring)
- Awareness that spread performs a shallow copy, not a deep clone
- Mention of rest replacing the legacy arguments object
Common Mistakes
- Claiming spread and rest are literally the same operator with no distinction
- Forgetting that rest parameters must be the last parameter in a function signature
- Assuming spread deep-clones nested structures
- Confusing rest in destructuring with the arguments object, which is array-like but not a real array
Best Answer (HR Friendly)
“They use the exact same three dots, but spread takes something bundled and breaks it apart — like spreading an array’s items into a new array — while rest takes loose leftover items and gathers them into one array or object, like collecting extra function arguments. I just remember: spread unpacks, rest packs.”
Code Example
// Spread: unpack arrays/objects into a new one
const nums = [1, 2, 3]
const moreNums = [...nums, 4, 5] // [1, 2, 3, 4, 5]
const base = { a: 1, b: 2 }
const merged = { ...base, c: 3 } // { a: 1, b: 2, c: 3 }
// Rest: collect remaining function args
function sum(first, ...rest) {
return rest.reduce((total, n) => total + n, first)
}
sum(1, 2, 3, 4) // 10
// Rest in destructuring: collect leftover properties
const { a, ...others } = merged
console.log(others) // { b: 2, c: 3 }Follow-up Questions
- Why must a rest parameter always be the last parameter in a function?
- Does spreading an array copy nested objects deeply or shallowly?
- How would you use rest to omit one property while keeping the rest of an object?
- What did developers use before spread/rest existed to merge arrays and objects?
MCQ Practice
1. What does the rest operator do in a function parameter list?
Rest gathers all remaining passed arguments into one real array inside the function.
2. What is the main visual difference between spread and rest syntax?
Both use identical "..." syntax; JavaScript disambiguates by whether values are being supplied or received.
3. What kind of copy does the spread operator produce for an object?
Spread copies top-level properties only; nested objects remain shared references.
Flash Cards
Spread operator purpose? — Unpacks/expands an iterable or object into individual elements.
Rest operator purpose? — Collects multiple remaining values into a single array or object.
How to tell spread from rest? — By position: supplying values (spread) vs receiving values (rest).
Does spread deep clone? — No — it only performs a shallow copy.