# Spread vs Rest Operators in JavaScript

JavaScript has evolved a lot over the years, and with ES6 came two incredibly useful features: the **spread (**`...`**)** and **rest (**`...`**) operators**. At first glance, they look identical—but they serve very different purposes.

If you’ve ever been confused about when to use each one, this guide will clear things up with simple explanations and practical examples.

### What is the Spread Operator?

The **spread operator (**`...`**)** is used to **expand** elements from an iterable (like an array or object) into individual elements.

**Think of it as: *“spreading things out”***

***Example with Arrays :***

```javascript
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);
// [1, 2, 3, 4, 5]
```

Here, the spread operator takes each element from `numbers` and expands it into the new array.

***Example with Objects :***

```javascript
const user = { name: "Rahul", age: 22 };
const updatedUser = { ...user, city: "Jodhpur" };

console.log(updatedUser);
// { name: "Rahul", age: 22, city: "Jodhpur" }
```

### What is the Rest Operator?

The **rest operator (**`...`**)** does the opposite. It **collects** multiple elements and packs them into a single structure (usually an array).

**Think of it as: “gathering things together”**

***Example in Function Parameters :***

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

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

Here, all arguments are collected into the `numbers` array.

***Example with Destructuring :***

```javascript
const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]
```

### Spread vs Rest: Key Differences

| ***Feature*** | ***Spread Operator*** | ***Rest Operator*** |
| --- | --- | --- |
| Purpose | Expands elements | Collects elements |
| Direction | One → Many | Many → One |
| Usage Context | Arrays, Objects, Function calls | Function params, Destructuring |
| Behavior | Breaks apart | Packs together |

### Expanding vs Collecting (Core Idea)

*   ***Spread = Expanding values***
    
    ```javascript
    const arr = [1, 2, 3];
    console.log(...arr); // 1 2 3
    ```
    
*   ***Rest = Collecting values***
    
    ```javascript
    function demo(...args) {
      console.log(args);
    }
    demo(1, 2, 3); // [1, 2, 3]
    ```
    

### Using Spread with Arrays and Objects

***1\. Copying Arrays (Shallow Copy)***

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

***2\. Merging Arrays***

```javascript
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
```

***3\. Copying Objects***

```javascript
const obj1 = { a: 1 };
const obj2 = { ...obj1 };
```

***4\. Merging Objects***

```javascript
const objA = { name: "Rahul" };
const objB = { age: 22 };

const combined = { ...objA, ...objB };
```

### Practical Use Cases

***1\. Cloning State (React Example)***

```javascript
const newState = { ...oldState, isLoggedIn: true };
```

***2\. Updating Arrays Without Mutation***

```javascript
const items = ["apple", "banana"];
const newItems = [...items, "orange"];
```

***3\. Flexible Function Arguments***

```javascript
function logAll(...args) {
  args.forEach(arg => console.log(arg));
}
```

***4\. Removing Elements Using Destructuring***

```javascript
const [remove, ...remaining] = [1, 2, 3];
```

### Visualizing the Concept

***Spread (Expanding)***

```javascript
[1, 2, 3]  →  1, 2, 3
```

***Rest (Collecting)***

```javascript
1, 2, 3  →  [1, 2, 3]
```

### Common Mistakes

*   Using rest outside valid positions (e.g., not at the end of parameters)
    
*   Confusing spread with deep copy (it’s only a shallow copy)
    
*   Overwriting properties unintentionally in object spread
    

### Conclusion

Even though they share the same syntax (`...`), the **spread** and **rest** operators serve opposite roles:

*   **Spread** → expands values
    
*   **Rest** → collects values
    

Mastering these operators will make your JavaScript code cleaner, more flexible, and easier to maintain—especially in modern frameworks like React.

* * *

*I write articles on* [***blog.prakashtsx.com***](http://blog.prakashtsx.com) *and also post development-related content on:*

*   [**Twitter / X**](https://claude.ai/chat/1564e342-3e7b-40fd-ad95-c9d167001fcd#)
    
*   [**LinkedIn**](https://claude.ai/chat/1564e342-3e7b-40fd-ad95-c9d167001fcd#)