JavaScript Destructuring Assignment In Hindi

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

Image could not load

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 को लेना हो तो कुछ इस तरह से करेंगे -

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

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 कर सकते हैं।

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

Output :

12 
44
Default value

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

Example :

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 :

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 :

let [l1, l2] = "Hello"; console.log(l1, l2); // Output : H e

Destructuring assignment use cases

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

// 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 कर सकते हैं।

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 :

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

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

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

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

Recent Blogs

Loading ...

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook