# Spread vs Rest in JavaScript — Ekdum Simple Bhasha Mein

So, what does **Spread** and **Rest** even mean in JavaScript?

Well technically!!!...

MDN will say something like:

> Spread syntax allows an iterable to be expanded, and rest collects multiple elements into a single variable.

Areee… ruk jao bhai… 😅  
Ye sab thoda zyada “interview wali English” ho gayi.

Let’s understand this in our own way — the **Barun style**.

* * *

# Spread vs Rest — Ekdum Simple Bhasha Mein

👉 **Spread → Expand karta hai (failata hai)**  
👉 **Rest → Collect karta hai (jodta hai)**

बस इतना समझ लो… aadha kaam ho gaya.

* * *

# Real Life Example (Sab clear ho jayega)

Socho tumhare paas ek **Laddu ka dabba** hai 🍬

### Spread kya karega?

Dabba khol ke **saare laddu table pe faila dega**

### Rest kya karega?

Table pe pade laddu ko **wapas ek dabbe me jama karega**

* * *

# Spread Operator ( ... )

## 👉 Kya karta hai?

Array ya object ke andar ke values ko **bahar nikaal deta hai**

* * *

## 📦 Example 1: Array Expand karna

```plaintext
const numbers = [1, 2, 3];

// Without spread
console.log(numbers); 
// [1, 2, 3]

// With spread
console.log(...numbers); 
// 1 2 3
```

👉 Yaha kya hua?

Array toot gaya…

values alag alag ho gayi.

* * *

## Example 2: Array Copy karna (Real Use Case)

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

console.log(copy);
```

👉 Ye shallow copy banata hai

👉 Original safe rehta hai

* * *

## Example 3: Arrays Merge karna

```plaintext
const arr1 = [1, 2];
const arr2 = [3, 4];

const merged = [...arr1, ...arr2];

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

👉 Interview me sabse jyada poocha jaata hai 😏

* * *

## Example 4: Objects me Spread

```plaintext
const user = {
  name: "Barun",
  age: 22
};

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

console.log(updatedUser);
```

👉 Old data + new data = done ✅

* * *

# Rest Operator ( ... )

## 👉 Kya karta hai?

Multiple values ko **ek variable me collect karta hai**

* * *

## Example 1: Function Arguments

```plaintext
function add(...numbers) {
  console.log(numbers);
}

add(1, 2, 3, 4);
```

👉 Output:

```plaintext
[1, 2, 3, 4]
```

👉 Sab values ek array me aa gayi

* * *

## Example 2: Destructuring me Rest

```plaintext
const numbers = [1, 2, 3, 4];

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

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

👉 First alag

👉 Baaki sab ek bundle me

* * *

# Spread vs Rest — Difference Samjho

| Feature | Spread | Rest |
| --- | --- | --- |
| Kaam | Expand karna | Collect karna |
| Direction | Inside → Outside | Outside → Inside |
| Use case | Copy, merge | Function args, destructuring |

* * *

# Visual Soch (Diagram Type Samajh)

### Spread

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

### Rest

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

* * *

# Real World Use Cases (Important hai bhai)

* * *

## ✅ 1. React me State Update

```plaintext
const user = {
  name: "Barun",
  age: 22
};

const updated = {
  ...user,
  age: 23
};
```

👉 Direct mutation nahi

👉 Clean update

* * *

## ✅ 2. Function me Unlimited Parameters

```plaintext
function totalPrice(...prices) {
  return prices.reduce((a, b) => a + b);
}
```

👉 Shopping cart jaisa system

* * *

## ✅ 3. API Data Merge

```plaintext
const apiData = { name: "Barun" };
const extraData = { role: "Developer" };

const final = { ...apiData, ...extraData };
```

👉 Backend + frontend data combine

* * *

# Golden Rule (Yaad rakhna)

👉 Jab **failana ho → Spread**

👉 Jab **jama karna ho → Rest**

* * *

# Common Confusion

```plaintext
function test(...args) {}  // Rest

const arr = [...numbers]; // Spread
```

👉 Same `...`

👉 Kaam alag

* * *

# 🧪 Mini Assignment (Dimaag chalao)

## Q1

```plaintext
const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, 5, ...arr2];
console.log(result);
```

* * *

## Q2

```plaintext
function test(a, b, ...rest) {
  console.log(rest);
}

test(1, 2, 3, 4, 5);
```

* * *

## Q3 (Thoda tricky 😏)

```plaintext
const [a, ...b] = [10, 20, 30, 40];

console.log(a);
console.log(b);
```

* * *

# Final Words

Spread aur Rest dono ek hi family ke hai…

Bas ek **extrovert hai (Spread)**

aur ek **introvert hai (Rest)** 😅

Ek duniya me values failata hai

Dusra sabko ek jagah jama karta hai

* * *

Agar ye concept clear ho gaya na…

Toh aapka JavaScript ka level

“just learning” se

“developer thinking” me shift ho gaya 🚀

* * *

Chalo ab sach sach batao…

Pehle confuse the ya ab clear hai? 😏