What are Spread and Rest Operators in JavaScript?
Learn how JavaScript's spread and rest operators use the same ... syntax to do opposite jobs, with clear examples, use cases and interview questions.
Expected Interview Answer
Both use the same three-dot (...) syntax but do opposite jobs: the spread operator expands an iterable (array, object, string) into individual elements, while the rest operator collects multiple individual elements into a single array or object.
Spread is used to copy or merge arrays/objects and to pass array elements as separate function arguments, for example [...arr] or {...obj}. Rest is used in function parameters (function f(...args)) and in destructuring to gather 'the remaining' values into one variable. Context decides the meaning: ... on the right side of an assignment or in a call spreads, while ... in a parameter list or on the left side of destructuring collects.
- Create shallow copies of arrays and objects easily
- Merge arrays or objects without mutating originals
- Write variadic functions that accept any number of arguments
- Cleanly gather 'the rest' during destructuring
- Replace older Function.prototype.apply patterns
AI Mentor Explanation
Spread is emptying a kit bag so every bat, glove and pad is laid out separately for selection — one bag becomes many individual items. Rest is the opposite: the coach scoops up all the leftover gear after practice and stuffs it into a single bag, collecting many scattered items into one.
Step-by-Step Explanation
Step 1
Spread an array into args
Math.max(...[3, 7, 2]) passes each element as a separate argument.
Step 2
Copy or merge with spread
const copy = [...arr]; const merged = {...a, ...b}; builds new shallow copies.
Step 3
Collect rest params
function sum(...nums) gathers all arguments into a single nums array.
Step 4
Rest in destructuring
const [first, ...others] = list; puts the leftover items into others.
Step 5
Read the context
... in a call or literal spreads; ... in a parameter list or destructuring collects.
What Interviewer Expects
- Recognition that both share ... syntax but do opposite things
- Correct example of spread copying/merging arrays or objects
- Correct example of rest gathering function arguments
- Awareness that spread produces shallow (not deep) copies
- Knowing rest must be the last parameter
Common Mistakes
- Confusing which one expands and which one collects
- Placing the rest parameter before other parameters
- Assuming spread makes a deep copy of nested objects
- Using more than one rest element in a single destructuring
- Thinking they only work on arrays, not objects or strings
Best Answer (HR Friendly)
“They share the same three-dot symbol but work oppositely. Spread takes one group and lays its items out separately, useful for copying or combining. Rest scoops many separate items into one group, useful when a function should accept any number of inputs.”
Code Example
// Spread: expand into individual pieces
const nums = [1, 2, 3];
console.log(Math.max(...nums)); // 3
const copy = [...nums, 4]; // [1, 2, 3, 4]
const merged = { ...{ a: 1 }, b: 2 }; // { a: 1, b: 2 }
// Rest: collect into a single array/object
function sum(...values) {
return values.reduce((t, n) => t + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
const [first, ...others] = [10, 20, 30];
console.log(first); // 10
console.log(others); // [20, 30]Follow-up Questions
- Does the spread operator create a deep or shallow copy?
- Why must the rest parameter be the last parameter?
- How is the rest operator different from the arguments object?
- Can you spread a string into an array of characters?
- How do you merge two objects while overriding shared keys?
MCQ Practice
1. Which statement correctly describes the two operators?
Spread expands an iterable into individual elements; rest collects multiple elements into one array or object.
2. What is the value of others in: const [a, ...others] = [1, 2, 3]?
Rest gathers the remaining elements after a into a new array, giving [2, 3].
3. Where must a rest parameter appear in a function signature?
A rest parameter must be the final parameter because it absorbs all remaining arguments.
Flash Cards
What does spread do? — Expands an iterable (array/object/string) into individual elements.
What does rest do? — Collects multiple individual elements into a single array or object.
Deep or shallow copy from spread? — Shallow — nested objects are shared by reference, not cloned.
Rest parameter position? — Must be the last parameter in the function signature.