Spread & Rest Operators (…) — “Teen dot… aur unlimited power!”

Spread aur Rest operators JavaScript mein ES6 se aaye hain aur dono ... syntax use karte hain. Yeh operators arrays aur objects ke saath kaam karne ko aasan aur powerful banate hain. React mein inka use state, props, aur data manipulation ke liye hota hai. Is section mein hum inhe thodi depth ke saath, par simple tareeke se, examples ke saath samjhenge taaki koi confusion na ho.

Spread aur Rest Operator Kya Hain?

• Spread Operator (...): Yeh elements ya properties ko “spread” (faila) deta hai, jaise array ke elements ya object ke properties ko copy ya combine karne ke liye.
• Rest Operator (...): Yeh bache hue elements ya properties ko ek variable mein collect karta hai, jaise destructuring ya function arguments ke liye.
• Difference: Spread failata hai (expand), Rest collect karta hai (gather). Context se pata chalta hai kaun sa use ho raha hai.

1. Spread Operator

Spread operator array ya object ke elements/properties ko individual items mein convert karta hai. Yeh copying, merging, aur updating ke liye useful hai.

Syntax:

// Array Spread
const newArray = [...array];

// Object Spread
const newObject = { ...object };

Array Spread

Spread operator arrays ko copy, combine, ya new elements add karne ke liye use hota hai.

Example 1: Copying an Array

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

console.log(copy); // Output: [1, 2, 3]
console.log(copy === original); // Output: false (nayi copy bani hai)

Explanation:

• ...original array ke elements ko naye array mein copy karta hai.
• Yeh shallow copy hai, yaani nested arrays/objects copy nahi hote, sirf reference hota hai.

Example 2: Combining Arrays

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

console.log(combined); // Output: [1, 2, 3, 4, 5]

Explanation:

• ...arr1 aur ...arr2 dono arrays ke elements ko ek naye array mein combine karta hai.
• Extra element 5 bhi add kiya gaya.

Object Spread

Spread operator objects ko copy ya merge karne ke liye use hota hai.

Example 3: Copying and Updating Object

const person = { name: "Rahul", age: 25 };
const updatedPerson = { ...person, age: 26, city: "Delhi" };

console.log(updatedPerson); // Output: { name: "Rahul", age: 26, city: "Delhi" }
console.log(person); // Output: { name: "Rahul", age: 25 } (original unchanged)

Explanation:

• ...person object ke saare properties ko copy karta hai.
• age: 26 se original age overwrite hota hai, aur city nayi property add hoti hai.

Deep Dive: Agar object mein nested objects hain, toh spread operator sirf shallow copy karta hai. Nested objects ka reference copy hota hai, na ki deep copy.

const person = { name: "Rahul", info: { age: 25 } };
const copy = { ...person };

copy.info.age = 26;
console.log(person.info.age); // Output: 26 (nested object ka reference shared hai)

Solution: Deep copy ke liye libraries jaise lodash ka cloneDeep use karo ya JSON.parse(JSON.stringify(obj)) (lekin limitations hain).

2. Rest Operator

Rest operator bache hue elements ya properties ko ek variable mein collect karta hai. Yeh destructuring ya function parameters mein use hota hai.

Syntax:

// Array Rest
const [first, ...rest] = array;

// Object Rest
const { key1, ...rest } = object;

// Function Rest
function func(...args) {}

Array Rest

Rest operator array destructuring mein bache hue elements ko collect karta hai.

Example 4: Array Destructuring with Rest

const numbers = [10, 20, 30, 40];
const [first, second, ...rest] = numbers;

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

Explanation:

• first aur second pehle do elements lete hain.
• ...rest baaki elements ko array ke roop mein collect karta hai.

Object Rest

Object destructuring mein rest operator bache hue properties ko collect karta hai.

Example 5: Object Destructuring with Rest

const person = { name: "Ankit", age: 28, city: "Mumbai" };
const { name, ...rest } = person;

console.log(name); // Output: Ankit
console.log(rest); // Output: { age: 28, city: "Mumbai" }

Explanation:

• name ek variable mein assign hota hai.
• ...rest baaki properties ko ek object mein collect karta hai.

Function Rest Parameters

Rest operator function mein saare arguments ko array ke roop mein collect karta hai.

Example 6: Rest in Functions

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

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(10, 20, 30, 40)); // Output: 100

Explanation:

• ...numbers saare arguments ko array mein collect karta hai.
• reduce method array ke elements ko add karta hai.

React mein Spread aur Rest ka Use

React mein spread aur rest operators props, state, aur data manipulation ke liye bahut kaam aate hain, kyunki yeh code ko concise aur flexible banate hain.

Example 7: Spread with Props in Functional Component

import React from 'react';

function UserCard({ name, ...otherProps }) {
return (

<div>
<h1>Name: {name}</h1>

Other Info: {JSON.stringify(otherProps)}
</div>
);
}
&nbsp;

export default function App() {
const user = { name: "Rahul", age: 25, city: "Delhi" };
return <UserCard {...user} >;
}

Explanation:

• ...user spread operator se saari properties props ke roop mein UserCard ko pass hoti hain.
• { name, ...otherProps } rest operator se name alag kiya aur baaki props collect kiye.
• Yeh Vite project mein src/App.jsx mein daal ke try kar sakte ho (npm run dev).

Example 8: Spread with State Updates

import React, { useState } from 'react';

function Counter() {
const [state, setState] = useState({ count: 0, isActive: true });

const handleClick = () => {
setState({ ...state, count: state.count + 1 });
};

const toggleActive = () => {
setState({ ...state, isActive: !state.isActive });
};

return (

<div>
<h1>Count: {state.count}</h1>

Status: {state.isActive ? 'Active' : 'Inactive'}
<button>Increment</button>
<button>Toggle Status</button>
</div>
);
}


export default Counter;

Explanation:

• ...state spread operator se state ki copy banayi taaki original state preserve rahe.
• Sirf count ya isActive update kiya, baaki properties unchanged rahi.
• Yeh functional component Vite project mein src/Counter.jsx mein daal ke test kar sakte ho.

Key Points

• Spread Operator: Arrays/objects ko copy, combine, ya update karne ke liye use hota hai. React mein props aur state ke liye perfect.
• Rest Operator: Destructuring ya function arguments mein bache hue items collect karta hai.
• Shallow Copy Limitation: Spread operator nested objects/arrays ke liye sirf reference copy karta hai, deep copy ke liye alag approach chahiye.
• React Best Practice: State updates mein spread operator use karo taaki existing state overwrite na ho. Props mein rest operator use karo extra props collect karne ke liye.