Destructuring – “Andar ki cheezein bahar nikaalne ka asaan tareeka”

Destructuring JavaScript mein ES6 se aaya ek powerful feature hai jo arrays aur objects se values ko easily extract karne mein madad karta hai. React mein yeh props, state, aur data handle karne ke liye bahut useful hai. Is section mein hum arrays aur objects ke destructuring ko simple examples ke saath samjhenge.

Destructuring Kya Hai?

Destructuring ek syntax hai jo array ya object ke elements/properties ko directly variables mein assign karta hai, bina repeatedly dot notation ya index use kiye. Yeh code ko short, readable, aur clean banata hai.

1. Array Destructuring

Array destructuring se hum array ke elements ko directly variables mein assign kar sakte hain.

Syntax:

const [var1, var2] = array;

Example 1: Basic Array Destructuring

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

console.log(first); // Output: 10
console.log(second); // Output: 20

Explanation:

• first ko array ka pehla element (10) assign hota hai.
• second ko doosra element (20) assign hota hai.
• Agar array mein zyada elements hain, toh baaki ignore ho jate hain.

Example 2: Skipping Elements

Agar humein specific elements chahiye, toh comma se skip kar sakte hain.

const numbers = [10, 20, 30, 40];
const [first, , third] = numbers;

console.log(first); // Output: 10
console.log(third); // Output: 30

Explanation:

• ,, se second element (20) skip kiya gaya.
• third ko teesra element (30) mila.

Example 3: Rest Operator

Baaki elements ko ek array mein collect karne ke liye rest operator (...) use karte hain.

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

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

Explanation:

• first ko pehla element mila.
• ...rest ne baaki saare elements ko array ke roop mein collect kiya.

2. Object Destructuring

Object destructuring se hum object ke properties ko directly variables mein assign kar sakte hain.

Syntax:

const { key1, key2 } = object;

Example 4: Basic Object Destructuring

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

console.log(name); // Output: Rahul
console.log(age); // Output: 25

Explanation:

• name aur age variables mein object ke corresponding properties assign hui.
• Property names aur variable names same hone chahiye.

Example 5: Renaming Variables

Agar variable ka naam alag chahiye, toh colon (:) use karte hain.

const person = { name: "Rahul", age: 25 };
const { name: personName, age: personAge } = person;

console.log(personName); // Output: Rahul
console.log(personAge); // Output: 25

Explanation:

• name: personName se name property ko personName variable mein assign kiya.
• Yeh tab useful hai jab variable naam conflict karta ho.

Example 6: Default Values

Agar property exist nahi karti, toh default value set kar sakte hain.

const person = { name: "Rahul" };
const { name, age = 30 } = person;

console.log(name); // Output: Rahul
console.log(age); // Output: 30

Explanation:

• age property nahi thi, isliye default value 30 assign hui.

React mein Destructuring ka Use

React mein destructuring props aur state handle karne ke liye bahut kaam aata hai, kyunki yeh code ko concise aur readable banata hai.

Example 7: Destructuring Props in Functional Component

import React from 'react';

function UserCard({ name, age }) {
return (

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

Age: {age}
</div>
);
}


export default function App() {
return ;
}

Explanation:

• UserCard component mein props ko { name, age } se destructure kiya.
• Isse props.name aur props.age likhne ki zarurat nahi padi.
• Yeh code Vite project mein src/App.jsx mein daal ke try kar sakte ho (npm run dev).

Example 8: Destructuring State with useState

import React, { useState } from 'react';

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

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

return (

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

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


export default Counter;

Explanation:

• useState se state object mila, jise { count, isActive } se destructure kiya.
• setState mein spread operator (...) use kiya taaki baaki state properties preserve rahen.
• Yeh functional component Vite project mein src/Counter.jsx mein daal ke test kar sakte ho.

Key Points

• Array Destructuring: Array elements ko variables mein assign karta hai, rest operator ke saath flexible hai.
• Object Destructuring: Object properties ko variables mein assign karta hai, renaming aur default values ke saath.
• React Use: Props aur state ke liye destructuring code ko clean aur readable banata hai.
• Best Practice: React components mein hamesha props aur state ko destructure karo taaki code short rahe.