Blog

Spread Operator Kya Hota Hai ?

Spread operator (…) JavaScript mein ek bahut useful feature hai jo iterable objects (jaise arrays ya objects) ko unke individual elements ya properties mein expand karne ka kaam karta hai. Jab hum … ko kisi array ya object ke saath use karte hain, toh wo us array ya object ko “spread” kar deta hai, yaani ki uske andar ke elements ko alag alag positions pe distribute kar deta hai.

Example ke liye, agar hum ek array ko doosre array mein spread karte hain, toh dono arrays ke elements ek saath combine ho jaate hain. Yeh operator array ko copy karne, function mein arguments ko pass karne ya objects ko merge karne mein bhi help karta hai. Yeh ek shorthand tarika hai jisse code concise aur readable banta hai.

Use Cases with Examples :

1. Arrays ko combine karna:

Arrays ko combine karna JavaScript mein ek aisi process hai jisme hum do ya zyada arrays ko ek single array mein merge karte hain. Yeh kaafi useful hota hai jab hume multiple arrays ke elements ko ek saath store karna ho. JavaScript mein arrays ko combine karne ke liye hum .concat() method ya spread operator (…) ka use kar sakte hain. .concat() ek naya array return karta hai jisme original arrays ke elements hote hain. Spread operator bhi arrays ko merge karne mein kaafi convenient aur efficient tariqa hai, jisme har element ko ek-ek karke combine kiya jata hai.

let fruits = ['apple', 'banana'];
let moreFruits = ['grapes', 'mango'];
let allFruits = [...fruits, ...moreFruits];

console.log(allFruits);
// Output: ['apple', 'banana', 'grapes', 'mango']

Yahaan …fruits aur …moreFruits ne dono arrays ke elements ko spread karke ek nayi array banayi.

2. Array cloning (copy banana):

Array cloning (copy banana) ek technique hai jisme ek existing array ko bilkul same copy banaya jata hai bina original array ko modify kiye. Isme hum naye array mein existing array ke elements ko copy karte hain, taki dono arrays independent ho. JavaScript mein array cloning karne ke liye kai tarike hain, jaise .slice(), concat(), spread operator (…), ya Object.assign() ka use. Yadi hum ek array ko clone karte hain, toh changes ek array mein dusre par effect nahi dalte. Yeh technique tab useful hoti hai jab hum original data ko preserve karna chahte hain.

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

console.log(copy);
// Output: [1, 2, 3]

…original se array ke saare elements nayi array me copy ho gaye.

3. Function mein multiple arguments dena:

Jab hum JavaScript mein function define karte hain, toh hum usmein multiple arguments de sakte hain. Matlab, ek hi function ko ek se zyada values pass ki ja sakti hain. Yeh values function ke parameters ke through function body mein accessible hoti hain. Multiple arguments dene se, hum function ko flexible bana sakte hain aur ek hi function ko alag-alag inputs ke liye use kar sakte hain. Iska fayda yeh hai ki hum apne code ko reusable aur efficient bana sakte hain, kyunki ek hi function ko alag-alag data ke saath call kar sakte hain.

function add(a, b, c) {
  return a + b + c;
}

let nums = [1, 2, 3];
console.log(add(...nums));
// Output: 6

Yahaan …nums ne array ke 3 elements ko function ke 3 arguments bana diya.

4. Objects merge karna:

Objects merge karna JavaScript mein ek process hai jisme do ya zyada objects ko combine kiya jata hai. Jab hum multiple objects ko merge karte hain, toh unke properties ko ek single object mein merge kiya jata hai. Agar kisi object mein same property naam ho, toh latest object ka value use hota hai. Ye kaam Object.assign() method ya spread operator (…) ke through kiya ja sakta hai. Object.assign() pehle object ko modify karta hai, jabki spread operator ek new object create karta hai. Iska use karte waqt hum properties ko efficiently combine kar sakte hain.

let user = { name: "Amit", age: 25 };
let location = { city: "Delhi", country: "India" };

let userDetails = { ...user, ...location };
console.log(userDetails);
// Output: { name: "Amit", age: 25, city: "Delhi", country: "India" }

…user aur …location se dono objects merge ho gaye.

Rest Operator Kya Hota Hai ?

Rest operator in JavaScript ek powerful feature hai jo function parameters ko handle karne mein madad karta hai. Jab bhi aapko unknown ya variable number of arguments ko ek function mein pass karna ho, to rest operator ka use hota hai. Ye “…” ke saath likha jata hai, jaise function(…args).

Rest operator saare extra arguments ko ek array mein convert kar deta hai. Matlab, agar function ko multiple values pass ki jati hain, to wo sab ek array ke form mein collect ho jati hain. Isse function ko flexible bana diya jata hai, jisme kitne bhi arguments diye ja sakte hain.

Use Cases with Examples :

1. Function mein multiple arguments lena :

JavaScript mein function ko multiple arguments dena ka matlab hai ek function ko ek se zyada values pass karna. Jab function ko call kiya jata hai, to hum alag-alag arguments de sakte hain jo function ke parameters ko match karte hain. Jaise ki agar humare function mein 2 ya 3 arguments hain, to unko alag-alag values de sakte hain. Yeh bahut useful hota hai jab hume ek hi function ke andar kai alag-alag inputs ki zaroorat hoti hai. JavaScript mein function arguments ka flexibility hai, jo code ko zyada dynamic aur reusable banata hai.

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

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

Yahaan …numbers ne saare arguments ko ek array me store kar liya.

2. Array destructuring with rest :

Array destructuring with rest in JavaScript ek aisa feature hai jisme hum ek array ko destructure karte waqt kuch elements ko ek variable me store kar sakte hain aur baaki elements ko ek array me collect kar sakte hain. Isme “rest” operator … ka use hota hai, jo remaining items ko ek array me collect kar leta hai. Example: const [first, second, …rest] = [1, 2, 3, 4, 5]; Yahan, first ko 1, second ko 2 milega, aur rest me baaki elements [3, 4, 5] store honge. Yeh approach helpful hoti hai jab hume kisi array ke kuch elements ko alag se handle karna ho.

let [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // 10
console.log(second); // 20
console.log(rest); // [30, 40, 50]

…rest ne baaki elements ko ek array me pack kar diya.

3. Object destructuring with rest:

Object destructuring with rest in JavaScript ek aise technique hai jisme hum object ke specific properties ko extract karte hain aur baaki properties ko ek “rest” variable mein collect kar lete hain. Iska use hum tab karte hain jab hume ek object ke kuch properties ki zarurat ho aur baaki properties ko ignore karna ho. Isse code clean aur readable ho jata hai.

let person = { name: "Ravi", age: 30, city: "Mumbai", country: "India" };
let { name, ...otherDetails } = person;

console.log(name); // Ravi
console.log(otherDetails); // { age: 30, city: "Mumbai", country: "India" }

…otherDetails ne object ke remaining properties ko ek naye object me store kiya.

Difference Between Spread & Rest

Quiz: Test Your Knowledge on Spread & Rest Operators in JavaScript

Bonus: Practical Application!

Aaj hi apne JavaScript code mein Spread & Rest operators ka istemal karke dekhein!

Spread & Rest operators ko sahi tareeke se samajhne ke liye unke upayog jaise arrays ko spread karna, objects ko merge karna, aur function arguments ko handle karna seekhein. In operators ka istemal apke code ko aur bhi clean aur efficient bana sakta hai.