ES6+ Features
Spread & Rest Operators
...
💡 Spread (...) ek box KHOLKAR saara saman phaila dena hai (jaise ek gift box ke saare items table par nikaal dena). Rest (...) ulta hai — bikhre hue items ko WAPAS ek box mein collect karna. Same symbol, opposite direction, context se pata chalta hai.
Spread operator (...) ek array/object ko "expand" karta hai — arrays combine karne, copy banane, function arguments pass karne ke liye. Rest operator (bhi ...) ulta kaam karta hai — multiple values ko EK array/object mein "collect" karta hai (function parameters mein, ya destructuring mein).
// Spread — array combine/copy:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1,2,3,4,5,6]
const copy = [...arr1]; // shallow copy
// Spread — object combine/copy:
const obj1 = { a: 1, b: 2 };
const merged = { ...obj1, c: 3 }; // { a:1, b:2, c:3 }
// Rest — function parameters (variable arguments collect karo):
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10 — sab "numbers" array mein collect ho gaye
// Rest — destructuring mein:
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]🌟
Spread (...) ek box KHOLKAR saara saman phaila dena hai (jaise ek gift box ke saare items table par nikaal dena). Rest (...) ulta hai — bikhre hue items ko WAPAS ek box mein collect karna. Same symbol, opposite direction, context se pata chalta hai.
1 / 2
⚡ झट से Recap
- Spread (expand): [...arr], {...obj} — combine/copy karne ke liye
- Rest (collect): function(...args), [a, ...rest] — multiple values ko ek mein
- Same ... symbol, context (kis side, kaha use hua) se direction decide hota hai
इस page में (2 subtopics)
Ek array ko individual arguments ki tarah function ko pass karne ke liye spread use hota hai — Math.max(...array) jaisa, apply() ki jagah (purana tareeka).
const numbers = [5, 2, 8, 1, 9];
console.log(Math.max(...numbers)); // 9 — array "spread" hokar individual args ban gaya
console.log(Math.max(numbers)); // NaN — array direct pass karna kaam nahi karta
// Purana tareeka (avoid, spread better hai):
// Math.max.apply(null, numbers);Tip: Math.max()/Math.min() sirf individual arguments accept karte hain, array nahi — spread operator ye gap fill karta hai bahut cleanly.
Spread se object/array copy karna SHALLOW copy hai — nested objects/arrays still SAME reference share karte hain. Deep copy ke liye alag technique (structuredClone(), ya JSON tricks) chahiye.
const original = { name: "Aarav", address: { city: "Mumbai" } };
const copy = { ...original };
copy.name = "Riya"; // theek hai, original unaffected
copy.address.city = "Delhi"; // DANGER: original.address.city bhi badal gaya!
console.log(original.address.city); // "Delhi" — shallow copy ka side effectCommon Mistake: {...obj} sirf TOP-LEVEL properties ki copy banata hai — nested objects abhi bhi original ke SAME reference hain. Deep copy chahiye ho to structuredClone(obj) (modern) use karo.