# Spread vs Rest Operators in JavaScript

If you've ever seen `...` in JavaScript code and wondered what it does — you're not alone. Those three dots are one of the most useful features in modern JavaScript, but they can be confusing because **the same symbol does two very different things** depending on where you use it.

In this article, we'll break down both the **Spread** and **Rest** operators in simple terms, look at real examples, and explore why developers use them every day.

What Does the Spread Operator Do?

Think of the spread operator like **unpacking a box**. You have a box (an array or object), and `...` takes everything out and spreads it flat.

```javascript
const fruits = ["apple", "banana", "mango"];

console.log(...fruits);
// Output: apple banana mango
```

Instead of getting the whole array, you get each item individually — *spread out*.

What Does the Rest Operator Do?

The rest operator is the **opposite** it's like **packing things into a box**. When you have multiple separate values, `...` gathers them together into a single array.

```javascript
function collectFruits(...fruits) {
  console.log(fruits);
}

collectFruits("apple", "banana", "mango");
// Output: ["apple", "banana", "mango"]
```

You passed in 3 separate values, and rest *collected* them into one array for you.

  
**Key Differences Between Spread and Rest**

|  | Spread | Rest |
| --- | --- | --- |
| **What it does** | Expands values outward | Collects values inward |
| **Where it's used** | In function calls, arrays, objects | In function parameters |
| **Think of it as** | Unpacking a suitcase | Packing a suitcase |

> **Same symbol, opposite jobs.** The context tells JavaScript which one you mean.

Using Spread with Arrays and Objects

Spread with Arrays

**Combining two arrays:**

```javascript
const veggies = ["carrot", "spinach"];
const fruits = ["apple", "mango"];

const allFood = [...veggies, ...fruits];
console.log(allFood);
// ["carrot", "spinach", "apple", "mango"]
```

**Copying an array (without linking them):**

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

copy.push(4);
console.log(original); // [1, 2, 3]  ← unchanged!
console.log(copy);     // [1, 2, 3, 4]
```

Spread with Objects

**Merging two objects:**

```javascript
const userInfo = { name: "Arjun", age: 22 };
const userRole = { role: "admin", active: true };

const fullUser = { ...userInfo, ...userRole };
console.log(fullUser);
// { name: "Arjun", age: 22, role: "admin", active: true }
```

**Overriding a single property:**

```javascript
const settings = { theme: "light", fontSize: 14 };
const updatedSettings = { ...settings, theme: "dark" };

console.log(updatedSettings);
// { theme: "dark", fontSize: 14 }
```

Practical Use Cases

Use Case 1 — Passing array items as function arguments

```js
const numbers = [5, 12, 3, 8];

// Math.max() doesn't accept arrays directly
console.log(Math.max(...numbers)); // 12
```

Use Case 2 — Rest in function parameters (flexible inputs)

```js
function addNumbers(first, second, ...rest) {
  console.log("First two:", first, second);
  console.log("The rest:", rest);
}

addNumbers(1, 2, 3, 4, 5);
// First two: 1 2
// The rest: [3, 4, 5]
```

Use Case 3 — Updating state in React (spread shines here)

```js
const user = { name: "Priya", age: 25, city: "Delhi" };

// Update only the city without touching the rest
const updatedUser = { ...user, city: "Mumbai" };
console.log(updatedUser);
// { name: "Priya", age: 25, city: "Mumbai" }
```

Use Case 4 — Collecting form inputs

```js
function submitForm(name, email, ...otherDetails) {
  console.log("Name:", name);
  console.log("Email:", email);
  console.log("Extra info:", otherDetails);
}

submitForm("Ravi", "ravi@gmail.com", "Mumbai", "Developer", "26");
```

Quick Summary

*   `...` is called **spread** when it **expands** an array/object into individual elements
    
*   `...` is called **rest** when it **collects** individual elements into an array
    
*   Spread works in function calls, array literals, and object literals
    
*   Rest works in function parameters
    
*   Both make your code cleaner and more flexible
    

Conclusion

Once you get the hang of it, `...` becomes one of those things you can't imagine coding without. Whether you're merging arrays, copying objects, or writing flexible functions, the spread and rest operators will save you a lot of repetitive code.

Try experimenting with them in your browser's console — the best way to learn is to break things and see what happens!

![](https://cdn.hashnode.com/uploads/covers/644510985259d501cf938e64/37527209-3363-47d3-8a9f-01a1dc2f57e9.png align="center")