ReviseAlgo Logo

Arrays & Iterables

Spread Operator & Rest Patterns

Master the JavaScript spread and rest patterns. Learn spread cloning, merging arrays, and collecting arguments with rest parameters.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

ES6 introduced the three-dots operator (...) to perform two opposite operations depending on the execution context: Spread (unpacking elements from an array or object) and Rest (packing elements together into a single array).

2. Why It Matters

Spread and rest patterns make working with collections clean and readable. They simplify copying arrays, merging configurations, and capturing variable numbers of arguments in functions.

3. Real-World Analogy

Think of a Deck of Cards:

  • Spread Pattern (Dealing Cards): Spreading a deck of cards face-up across a table, turning a single structured pack into individual, accessible cards.
  • Rest Pattern (Collecting Cards): Gathering individual cards scattered across the table and stacking them back together into a single, organized deck.

4. How It Works

The two patterns behave differently depending on where the ... operator is placed:

1. The Spread Operator:

Used in expressions (like array literals or function calls) to unpack elements.

2. The Rest Pattern:

Used in destructuring assignments or function signatures to collect remaining values into an array.

5. Practical Example

This script demonstrates using object spread to merge user profiles with default settings safely:

6. Common Mistakes

  • Misplacing rest parameters: Rest parameters must be the last parameter in a function signature or destructuring assignment. Placing variables after the rest parameter throws a SyntaxError.

7. Quick Quiz

Q1: Which pattern is active when using ... in a function parameter list?

A) Spread Operator

B) Rest Parameter

Answer: B — Using ... in function signatures is the Rest Parameter pattern, which collects arguments into a single array.

8. Scenario-Based Challenge

The Dynamic Argument Forwarder:

You write a tracker utility proxy function: logAndExecute(fn, ...args). The proxy must log the arguments, and then execute the function fn passing the arguments forward. Write the proxy using both rest and spread patterns.

9. Debugging Exercise

Explain why this config override object is empty, and how to fix it:

const baseConfig = { port: 8080 };

// Objective: Copy baseConfig into a new object using spread
const activeConfig = (...baseConfig); // syntax bug!
console.log(activeConfig); // crashes or parses incorrectly!
View Solution

Diagnosis: The spread operator must be used inside collection brackets (e.g. { ...obj } for objects or [ ...arr ] for arrays). Using parentheses instead of curly braces is invalid syntax.

Fix: Wrap the spread operator in curly braces to create a new object:

const activeConfig = { ...baseConfig };

10. Interview Questions

🟢 Q1: Contrast the spread operator and rest parameters.

Answer:
• Spread Operator: Unpacks elements from an array or properties from an object into individual values. It is used in expressions (like array literals or function calls).
• Rest Parameters: Gathers multiple individual arguments or properties together into a single array or object. It is used in destructuring assignments or function signatures.

11. Production Considerations

  • • Shallow Copy Reminder: The spread operator creates a shallow copy. If the copied array or object contains nested references, modifying those nested values changes the original data. Use deep cloning (like structuredClone) when complete isolation is needed.