local Storage In JavaScript In Hindi | JS local Storage In Hindi
Nullish coalescing assignment In JavaScript In Hindi
JavaScript console Object : Window Console Object In Hindi
Password Strength Checker In jQuery In Hindi
session Storage In JavaScript In Hindi | JS session Storage In Hindi
Web Performance In Hindi : Website Performance Kya Hai?
Best Keyboards Under 1000 Available On Amazon
PHP stdClass In Hindi | stdClass In PHP
What is TCP/IP Model In Hindi | Layers of TCP/IP Model
How to Implement RESTful APIs In NodeJS In Hindi | NodeJS RestFul API Example
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 में रखते हैं।
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 बना सकते हैं।
let arr = ["value1", "value2"];
let [val1, val2] = arr;
console.log(val1);
console.log(val2);
Output :
value1 value2
तो कुछ इस तरह से हम किसी भी Array में से कुछ values को use कर सकते हैं। नीचे Array Destructuring के कुछ और important examples दिए गए हैं।
Array Destructuring का syntax simple है और जैसा कि आप ऊपर दिए गए example में देख सकते हैं। Array Destructuring के कुछ example इस प्रकार हैं -
हालाँकि 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
हालाँकि अगर आपको लगता है कि 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 नहीं मिल रही हो।
अब अगर 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 कहते हैं।
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 करके आप 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];
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
अब चूंकि हम 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 के बारे में अच्छे से समझ आ गया होगा।
Loading ...
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