Blog

Destructuring Assignment Kya Hota Hai ?

Destructuring assignment JavaScript ka ek feature hai jiska use hum object ya array ke values ko easily variables mein assign karne ke liye karte hain.
Yeh syntax humein clean aur readable code likhne mein madad karta hai.

Simple words mein:
Aap kisi array ya object ke andar se values ya properties ko alag-alag variables mein extract kar sakte ho ek hi line mein. Isko hi destructuring kehte hain.

Destructuring Arrays

Destructuring Arrays (JavaScript) ek JavaScript feature hai jo humein arrays ke elements ko easily extract karne ki suvidha deta hai. Iska use karke hum kisi array ke values ko directly variables mein assign kar sakte hain bina indexing ke. Jaise const [a, b] = [10, 20]; mein a banega 10 aur b banega 20. Ye syntax cleaner aur readable hoti hai, especially jab hum functions se multiple values return karte hain. Hum default values bhi de sakte hain, aur nested arrays ko bhi destructure kar sakte hain. Ye modern JavaScript (ES6) ka ek useful feature hai.

Example:

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Explanation:
Yahaan [a, b, c] ek array pattern hai jismein hum 1, 2, 3 ko variables mein store kar rahe hain.

Matlab:

• a = 1
• b = 2
• c = 3

Skip karna (Index ko chhodna)

Agar aapko array destructuring mein kisi specific index ko skip karna ho, to aap simply uss jagah comma (,) laga kar us index ko chhod sakte hain. Jaise agar aap sirf pehla aur teesra element lena chahte hain, to syntax hoga: const [a, , c] = [1, 2, 3];. Yahan a banega 1, c banega 3, aur second value (2) ko skip kar diya gaya hai. Ye technique tab kaam aati hai jab aapko har element ki zarurat nahi hoti aur aap code ko short aur readable rakhna chahte ho.

const [x, , z] = [10, 20, 30];
console.log(x); // 10
console.log(z); // 30

Beech wala (20) skip ho gaya.

Default Value dena

const [a = 5, b = 10] = [1];
console.log(a); // 1
console.log(b); // 10

Agar value nahi milti to default value use hoti hai.

Destructuring Objects – (Object se values nikaalna)

JavaScript mein object destructuring ek feature hai jo humein kisi object ke properties ko easily extract karne ki suvidha deta hai aur unhe alag-alag variables mein assign karta hai. Iska syntax bahut concise hota hai. Agar humare paas ek object hai jisme multiple properties hain, to hum unhe curly braces {} ka use karke directly variables mein tod (destructure) sakte hain. Yeh code ko readable aur short banata hai. Agar koi property object mein nahi milti, to uska value undefined hota hai. Hum default values bhi assign kar sakte hain destructuring ke waqt.

const person = { name: "Sandeep", age: 25 };
const { name, age } = person;
console.log(name); // "Sandeep"
console.log(age); // 25

Humne object ke andar se name aur age ko directly variables mein assign kar liya.

Variable ka naam badalna :

Agar aap destructuring ke waqt variable ka naam badalna chahte ho, to JavaScript mein aap us property ko : ka use karke naya naam de sakte ho. Yeh tab useful hota hai jab aapko object ke original property name se alag variable name chahiye.

const user = { name: "Amit", age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // "Amit"
console.log(userAge); // 25

Explanation:
name: userName ka matlab hai ke user object ka name property extract karke hum usse userName variable mein store kar rahe hain.

Default Value dena :

Agar aap kisi object ki property destructure kar rahe ho aur us property ka value undefined ya missing hai, to aap uske liye default value assign kar sakte ho. Isse code error-proof ban jata hai aur agar value na ho to bhi ek fallback mil jata hai.

const { city = "Delhi" } = {};
console.log(city); // "Delhi"

Agar value nahi milti, to default value use hoti hai.

Nested Destructuring – (Andar se andar ka data)

Array ke andar object

const users = [{ name: "Ram", age: 20 }, { name: "Shyam", age: 22 }];
const [{ name: user1 }, { age: age2 }] = users;
console.log(user1); // "Ram"
console.log(age2); // 22

Object ke andar array

const data = {
  id: 1,
  tags: ["js", "react", "node"]
};
const { tags: [firstTag] } = data;
console.log(firstTag); // "js"

Function Parameters ke sath Destructuring

function greet({ name, age }) {
  console.log(`Hello ${name}, age is ${age}`);
}

greet({ name: "Sita", age: 30 });

Function ke andar hi destructuring ho gayi.

Summary

Quiz: Test Your Knowledge on Destructuring Assignment in JavaScript

Bonus: Practical Application!

Aaj hi JavaScript mein Destructuring Assignment ka use karke dekhein – coding aur bhi easy banayiye!

JavaScript mein destructuring assignment ka sahi tareeke se samajhne ke liye different types jaise array destructuring, object destructuring, nested destructuring, aur default values ka upayog karein aur apne code ko aur bhi readable aur efficient banayein.