JavaScript Destructuring Assignment In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

JavaScript में Object और Array सबसे ज्यादा use होने वाले data structures हैं। जिसमे Objects से हम data को key : value pair में एक entity में bind करके रखते हैं , तो वहीँ Array में किसी भी Data Types values को ordered list में रखते हैं।

Image on pixabay

What is Destructuring assignment ?

JavaScript में Destructuring assignment एक special syntax है जिसके through , Array या Objects को variables में “unpack” करते हैं। unpack का मतलब है values को directly get करना। देखा जाए तो Destructuring assignment कभी कभी काफी convenient होता है।

Example के लिए किसी array या Object से अगर हमें किसी value को लेना हो तो कुछ इस तरह से करेंगे -

Copy
let arr = ["value1", "value2", "value"];
let obj = {
  key1 : "value1",
  key2 : "value3",
  key3 : "value3"
}

// Access array value.
console.log(arr[0]);

// Access value from object.
console.log(obj.key1);

Obviously हाँ ! यह कोई गलत तरीका नहीं है , लेकिन Destructuring assignment की help से हम इसे और easy और convenient बना सकते हैं।

Destructuring assignment Example

Copy
let arr = ["value1", "value2"];
let [val1, val2] = arr;
console.log(val1);
console.log(val2);

Output :

value1
value2

तो कुछ इस तरह से हम किसी भी Array में से कुछ values को use कर सकते हैं। नीचे Array Destructuring के कुछ और important examples दिए गए हैं।

JavaScript Array Destructuring

Array Destructuring का syntax simple है और जैसा कि आप ऊपर दिए गए example में देख सकते हैं। Array Destructuring के कुछ example इस प्रकार हैं -

Ignore elements

हालाँकि array में ज्यादा elements हैं और आप किसी particular value को use करना चाहते हैं तो array values को skip करने के लिए comma (,) का use कर सकते हैं।

Copy
let [first, , ,fourth] = [12,23,3,44,46,7,56];
console.log(first, fourth);

Output :

12 
44

Default value

हालाँकि अगर आपको लगता है कि value नहीं मिल रही है तो उसके लिए आप default value भी set कर सकते हैं।

Example :

Copy
let [fname, laname='Rajput'] = ['Rahul'];
console.log(fname + laname); // Output : Rahul Rajput

// default values will assign if value is not in array.
let [fname, laname='Rajput'] = ['Rahul', 'Kumar'];
console.log(fname + laname); // Output : Rahul Kumar

ध्यान रहे default values तभी काम करती हैं , जब right side से value नहीं मिल रही हो।

...rest

अब अगर array की length ज्यादा है और चाहते हैं बाकी बचे हुए elements भी capture हो जाएँ , तो आप triple dots (...) का use कर सकते हैं।

Example :

Copy
let [name1, name2, ...other] = ["Raju", "Shyam", "Babu Rao", "Totala Seth"];

console.log(name1);     // Raju
console.log(name2);     // Shyam
console.log(other[0]);  // Babu Rao
console.log(other[1]);  // Totala Seth

Actually triple dots का use Functions dynamically arguments को handle करने के लिए भी किया जाता है जिन्हे Variable Length Arguments Functions कहते हैं।

Works with any iterable

Destructuring assignment को आप किसी भी iterable Object / data के साथ use कर सकते हैं। जैसे String को आप Array की तरह से for Loop या while Loop के साथ iterate करते हैं। तो आप String के साथ भी Destructuring assignment को use कर सकते हैं।

Example :

Copy
let [l1, l2] = "Hello";
console.log(l1, l2);

// Output : H e

Destructuring assignment use cases

Destructuring assignment का use करके आप 2 numbers को swap या String को split करके use में ले सकते हैं।

Copy
// use case 1.
let [fname, lname] = "Rahul Kumar".split(' ');
console.log(fname); // Rahul 
console.log(lname); // Kumar

// use case 2.
let n1 = 10;
let n2 = 20;

// Swap the values like n1=20, n2=10.
[n1, n2] = [n2, n1];

JavaScript Object destructuring

Array की तरह ही आप Object से property के according किसी value को get कर सकते हैं।

Copy
let product = {
  title: "Shirt",
  color: 'white',
  price: 500
};

let {title, price} = product;

console.log(title);  // Shirt
console.log(price);  // 500

Order does not matter

अब चूंकि हम values को Object में define की गयी properties के according access कर रहे हैं इसलिए left side में दे गयी properties का order matter नहीं करता है।

For Example :

Copy
let {price, title} = product; // it will not impact .

ध्यान रहे कि आप left side में वही properties दे सकते हैं जो Object में available हैं otherwise error आएगी। हालाँकि अगर आप unavailable properties के लिए default value set कर सकते हैं।

Copy
let product = {
  title: "Shirt",
  price: 500
};

let {title, price, color='white'} = product;

I Hope, आपको JavaScript में destructuring assignment के बारे में अच्छे से समझ आ गया होगा।