# Spread vs Rest — Clean Patterns for Modern JavaScript

Modern JavaScript introduced powerful syntax that makes working with data cleaner and more expressive. Two of the most commonly used features are the **spread (**`...`**)** and **rest (**`...`**) operators**.

Interestingly, both use the same syntax—but behave very differently.

Let’s break them down.

* * *

## 🚀 What is the Spread Operator?

The **spread operator** is used to **expand (unpack)** elements from an iterable (like arrays, strings, or objects).

👉 Think of it as: **“Take this structure and spread its values out.”**

### Example: Arrays

```js
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]
```

### Example: Combining Arrays

```js
const a = [1, 2];
const b = [3, 4];

const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]
```

* * *

### Example: Objects

```js
const user = { name: "John" };
const updatedUser = { ...user, age: 25 };

console.log(updatedUser);
// { name: "John", age: 25 }
```

* * *

## 📦 What is the Rest Operator?

The **rest operator** is used to **collect multiple elements into a single structure**.

👉 Think of it as: **“Gather remaining values into one variable.”**

* * *

### Example: Function Parameters

```js
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3)); // 6
```

Here, `...numbers` collects all arguments into an array.

* * *

### Example: Array Destructuring

```js
const arr = [1, 2, 3, 4];

const [first, ...rest] = arr;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]
```

* * *

## 🔥 Spread vs Rest (Key Difference)

| Feature | Spread Operator | Rest Operator |
| --- | --- | --- |
| Purpose | Expands values | Collects values |
| Usage | Right-hand side | Left-hand side |
| Use Case | Copy, merge, pass values | Function params, destructuring |

* * *

## 🧠 Core Idea (Most Important for Interviews)

*   **Spread → Expanding values**
    
*   **Rest → Collecting values**
    

Even though syntax is the same (`...`), 👉 **context decides behavior**

* * *

## 📊 Visual Understanding

### Spread (Expanding)

```plaintext
[1, 2, 3]
   ↓
...arr
   ↓
1, 2, 3
```

* * *

### Rest (Collecting)

```plaintext
1, 2, 3
   ↓
...rest
   ↓
[1, 2, 3]
```

* * *

## 💡 Practical Use Cases

### 1\. Copying Arrays (Immutable Approach)

```js
const original = [1, 2, 3];
const copy = [...original];
```

* * *

### 2\. Updating State (React Pattern)

```js
const newState = { ...state, isLoggedIn: true };
```

* * *

### 3\. Removing Elements

```js
const [_, ...remaining] = [10, 20, 30];
console.log(remaining); // [20, 30]
```

* * *

### 4\. Flexible Functions

```js
function logAll(...args) {
  console.log(args);
}
```

* * *

### 5\. Merging Objects

```js
const obj1 = { a: 1 };
const obj2 = { b: 2 };

const merged = { ...obj1, ...obj2 };
```

* * *

## ⚠️ Common Mistakes

### ❌ Confusing Spread with Rest

```js
const [...a] = [1, 2, 3]; // Rest (collecting)
const b = [...a];         // Spread (expanding)
```

* * *

### ❌ Order Matters in Objects

```js
const obj = { a: 1, ...{ a: 2 } };
console.log(obj); // { a: 2 }
```

👉 Later values overwrite earlier ones.

* * *

## 🧪 Interview Insight

Interviewers love testing this:

*   Difference between spread & rest
    
*   Use in destructuring
    
*   Immutability patterns
    
*   Real-world usage (React, APIs, etc.)
    

👉 Focus on **mental model**, not memorization.

* * *

## 🏁 Final Thoughts

The spread and rest operators are simple but incredibly powerful.

*   Use **spread** when you want to **expand data**
    
*   Use **rest** when you want to **collect data**
    

Mastering this distinction will make your JavaScript cleaner, more readable, and interview-ready.