# Spread vs Rest Operators in JavaScript

JavaScript ES6 introduced two powerful features: the **spread (**`...`**)** and **rest (**`...`**)** operators. Although they use the same syntax, their behavior and purpose are quite different. Understanding these operators can significantly simplify your code and make it more readable.

* * *

## 1\. What is the Spread Operator?

The **spread operator** is used to **expand** elements of an iterable (like arrays or objects) into individual elements.

### Key Idea: *Expanding Values*

### 🔹 Example with Arrays

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

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

### 🔹 Copying an Array

```javascript
const original = [10, 20, 30];
const copy = [...original];

console.log(copy); // [10, 20, 30]
```

### 🔹 Merging Arrays

```javascript
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];

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

### 🔹 Spread with Objects

```javascript
const user = { name: "Nikki", age: 19 };
const updatedUser = { ...user, city: "Faridabad" };

console.log(updatedUser);
// { name: "Nikki", age: 19, city: "Faridabad" }
```

### 🔹 Overriding Properties

```javascript
const settings = { theme: "light", notifications: true };
const newSettings = { ...settings, theme: "dark" };

console.log(newSettings);
// { theme: "dark", notifications: true }
```

* * *

## 2\. What is the Rest Operator?

The **rest operator** is used to **collect** multiple elements into a single array or object. It is commonly used in **function parameters** and **destructuring**.

### Key Idea: *Collecting Values*

### 🔹 Rest in Function Parameters

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

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

### 🔹 Rest with Array Destructuring

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

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

### 🔹 Rest with Object Destructuring

```javascript
const student = {
  name: "Radhika",
  age: 26,
  course: "CSE",
  city: "Faridabad"
};

const { name, ...otherDetails } = student;

console.log(name);          // Radhika
console.log(otherDetails);  // { age: 26, course: "CSE", city: "Faridabad" }
```

* * *

## 3\. Spread vs Rest: Key Differences

| Feature | Spread Operator | Rest Operator |
| --- | --- | --- |
| **Purpose** | Expands elements | Collects elements |
| **Usage** | Arrays, Objects, Function Calls | Function Parameters, Destructuring |
| **Position** | Anywhere in expressions | Must be the last parameter |
| **Result** | Individual values | Array or Object |
| **Concept** | Expanding | Collecting |

* * *

### Example

```javascript
// Spread: Expanding values
const nums = [1, 2, 3];
console.log(...nums); // 1 2 3

// Rest: Collecting values
function display(first, ...others) {
  console.log(first);   // 1
  console.log(others);  // [2, 3]
}
display(1, 2, 3);
```

* * *

## 4\. Practical Use Cases

### 🔹 1. Cloning Objects (Immutability)

```javascript
const state = { count: 0 };
const newState = { ...state, count: state.count + 1 };
```

Useful in **React** and state management to avoid direct mutations.

### 🔹 2. Combining Multiple Arrays

```javascript
const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "Express"];
const fullStack = [...frontend, ...backend];
```

### 🔹 3. Passing Array Elements as Function Arguments

```javascript
const numbers = [5, 10, 15];
console.log(Math.max(...numbers)); // 15
```

### 🔹 4. Removing Specific Properties from Objects

```javascript
const user = { id: 1, name: "Radhika", password: "secret" };
const { password, ...safeUser } = user;

console.log(safeUser); // { id: 1, name: "Radhika" }
```

### 🔹 5. Handling Variable Number of Function Arguments

```javascript
function multiply(multiplier, ...values) {
  return values.map(value => value * multiplier);
}

console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]
```

* * *

## 5\. Common Mistakes to Avoid

### Rest Parameter Not at the End

```javascript
// Incorrect
function example(...args, last) {}

// Correct
function example(first, ...args) {}
```

### Shallow Copy Limitation

```javascript
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };

obj2.b.c = 5;
console.log(obj1.b.c); // 5 (still affected)
```

> Spread creates a **shallow copy**, not a deep copy.

* * *

## 6\. When to Use Spread vs Rest

| Scenario | Operator to Use |
| --- | --- |
| Copying or merging arrays/objects | Spread |
| Passing array elements to functions | Spread |
| Collecting remaining parameters | Rest |
| Extracting properties while grouping others | Rest |

* * *

## Conclusion

The **spread** and **rest** operators are essential tools in modern JavaScript. While they share the same syntax (`...`), their purposes are opposite:

*   **Spread (**`...`**) → Expands values**
    
*   **Rest (**`...`**) → Collects values**
    

Mastering these operators will help you write cleaner, more concise, and more maintainable code.

Thank you for reading this blog. I am open to feedback and suggestion.