Spread vs Rest Operators in JavaScript

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];


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


`👉 It spreads elements individually.

---

### 📊 Visualization


```id="viz1"
[1, 2, 3]

↓

...arr

↓

1, 2, 3`


Enter fullscreen mode
 


 Exit fullscreen mode


### 📦 Copying Arrays


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


`✔ Creates a shallow copy
✔ Avoids mutation

---

### 📦 Spread with Objects


```js id="spread3"
const user = { name: "Rahul", age: 22 };

const updatedUser = {
 ...user,
 city: "Delhi"
};`


Enter fullscreen mode
 


 Exit fullscreen mode


## 🧠 What Is the Rest Operator?


The rest operator (...) is used to collect multiple values into one.


> Think: “Gather everything into a box”


### 📥 Rest in Function Parameters


```js id="rest1"
function sum(...numbers) {
 return numbers.reduce((total, num) => total + num, 0);
}


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


`👉 All arguments are collected into an array

---

### 📊 Visualization


```id="viz2"
1, 2, 3, 4

↓

...numbers

↓

[1, 2, 3, 4]`


Enter fullscreen mode
 


 Exit fullscreen mode


### 📥 Rest in Destructuring


```js id="rest2"
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 values | Collects values |
| Usage position | Right side | Left side |
| Output | Individual elements | Array |

---

## 🛠️ Practical Use Cases

---

### 1. Merging Arrays


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

const merged = [...a, ...b];`


Enter fullscreen mode
 


 Exit fullscreen mode


### 2. Function Arguments


```js id="use2"
const nums = [1, 2, 3];


function multiply(a, b, c) {
 return a * b * c;
}


multiply(...nums);


`---

### 3. Removing Properties from Object


```js id="use3"
const user = { name: "Rahul", age: 22, city: "Delhi" };

const { city, ...rest } = user;

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


Enter fullscreen mode
 


 Exit fullscreen mode


### 4. Updating State (Real-world pattern)


```js id="use4"
const state = { count: 0 };


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


`---

## 🧩 Conceptual Understanding

* **Spread → breaks things apart**
* **Rest → puts things together**

---

## 🎯 Common Interview Insight

Interviewers often test:

* Can you merge arrays?
* Can you handle variable arguments?
* Do you understand destructuring with rest?

---

## 🚀 Final Thoughts

The `...` operator is small but powerful.

Mastering **spread vs rest** helps you:

* Write cleaner code
* Handle data efficiently
* Solve interview problems confidently

---

## 🧠 Quick Summary

* Spread → expands values
* Rest → collects values
* Same syntax, different behavior based on context

---`


Enter fullscreen mode
 


 Exit fullscreen mode