JS डिस्ट्रक्चरिंग

किसी gift basket को unpack करने के बारे में सोचें, पूरी basket को इधर-उधर ले जाने के बजाय, आप वही खास items निकालते हैं जो आपको चाहिए, cheese यहाँ, crackers वहाँ, हर एक सीधे अपनी जगह जाता हुआ। JavaScript में destructuring arrays और objects के लिए वही unpacking करता है, खास values को सीधे उनके अपने named variables में निकालते हुए, एक single, compact statement में, हर टुकड़े को अलग-अलग access करने के बजाय। असली code लगातार destructuring पर निर्भर रहता है, किसी tutorial का title और language एक साथ unpack करने से लेकर cookiescursor.com जैसे project में function results को साफ तरीके से संभालने तक।

In this page:

Array Destructuring
Object Destructuring
Default Values
Renaming और Nested Destructuring
Destructuring में Rest Operator

Syntax

javascript

const [item1, item2] = array;
const { property1, property2 } = object;
const { property: alias = defaultValue } = object;

Array Destructuring

Array destructuring elements को सिर्फ उनकी position के आधार पर variables में assign करता है, पहला variable पहला element लेता है, दूसरा दूसरा element, वगैरह।

Note: array destructuring के दौरान किसी ऐसे element को जानबूझकर skip करने के लिए जो आपको नहीं चाहिए, बीच में कुछ न रखते हुए बस एक comma इस्तेमाल करें।

Warning: Array destructuring में क्रम सीधे मायने रखता है, pattern में दो variable names की अदला-बदली यह भी बदल देती है कि हर एक को कौन सी value मिलती है।

उदाहरण: Array Destructuring

javascript

const [first, second] = [10, 20];
console.log(first, second);

Object Destructuring

Object destructuring values को position के बजाय matching property names के आधार पर variables में assign करता है, जिससे आप object में उनके क्रम की परवाह किए बिना ठीक वही properties निकाल सकते हैं जो आपको चाहिए।

Note: Object destructuring में variable names को object के असली property names से मेल खाना चाहिए, जब तक कि आप उन्हें explicitly rename न करें।

Warning: किसी ऐसी property को destructure करना जो object में मौजूद ही नहीं है, बस undefined देता है, कोई error नहीं आता।

उदाहरण: Object Destructuring

javascript

// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
const user = { name: "Sam", age: 30 };
// Destructure {name, age} out of `user`
// Destructure {name, age} out of `user`
const { name, age } = user;
// Print `name, age` to the console
// Print `name, age` to the console
console.log(name, age);

Default Values

array और object destructuring दोनों default values को support करते हैं, जो अपने आप तब लागू होती हैं जब संबंधित source value undefined हो, बिना अतिरिक्त conditional code के एक fallback देते हुए।

Note: destructuring में default values सिर्फ तब लागू होती हैं जब value undefined हो, 0 या खाली string जैसी दूसरी falsy values के लिए नहीं।

Warning: destructuring pattern में defined कोई default value चुपचाप नज़रअंदाज़ हो जाती है अगर source data असल में explicitly null देता है, क्योंकि null, undefined नहीं है।

उदाहरण: Default Values

javascript

// Destructure {name = "Guest"} out of `{}`
// Destructure {name = "Guest"} out of `{}`
const { name = "Guest" } = {};
// Print `name` to the console
// Print `name` to the console
console.log(name);
// Destructure `[5]` into array elements a = 1, b = 2
// Destructure `[5]` into array elements a = 1, b = 2
const [a = 1, b = 2] = [5];
// Print `a, b` to the console
// Print `a, b` to the console
console.log(a, b);

Renaming और Nested Destructuring

Object destructuring आपको किसी variable को निकालते हुए rename करने देता है, property: newName इस्तेमाल करके, और सीधे nested objects के अंदर तक पहुंच सकता है, एक single statement में गहराई में छुपी values निकालते हुए।

Note: destructuring के दौरान rename करना खासतौर पर तब उपयोगी है जब कोई property name आपके current scope के किसी मौजूदा variable से टकरा सकती हो।

Warning: Nested destructuring यह मान लेता है कि बीच की structure असल में मौजूद है, undefined से किसी nested property को destructure करने की कोशिश करने पर error आता है।

उदाहरण: Renaming and Nested Destructuring

javascript

// Declare the constant `user`, set to `{ name: "Sam", address: { city: "Delhi" } }`
// Declare the constant `user`, set to `{ name: "Sam", address: { city: "Delhi" } }`
const user = { name: "Sam", address: { city: "Delhi" } };
const { name: userName, address: { city } } = user;
// Print `userName, city` to the console
// Print `userName, city` to the console
console.log(userName, city);

Destructuring में Rest Operator

destructuring pattern के अंदर rest operator ... बाकी बची, unmatched values या properties को एक नई array या object में इकट्ठा कर देता है, जिससे आप जो हिस्से explicitly चाहते हैं उन्हें बाकी सब से अलग कर सकते हैं।

Note: rest operator को destructuring pattern में हमेशा सबसे आखिर में आना चाहिए, JavaScript को यह जानना ज़रूरी है कि यह बाद में जो भी बचता है उसे collect कर रहा है।

Warning: objects के साथ rest operator इस्तेमाल करने के लिए modern browser support चाहिए, जो अब लगभग हर जगह है, पर यह array rest destructuring से थोड़ा नया addition है।

उदाहरण: The Rest Operator in Destructuring

javascript

// Destructure `[1, 2, 3, 4]` into array elements first, ...rest
// Destructure `[1, 2, 3, 4]` into array elements first, ...rest
const [first, ...rest] = [1, 2, 3, 4];
// Print `first, rest` to the console
// Print `first, rest` to the console
console.log(first, rest);
// Destructure {id, ...others} out of `{ id: 1, name: "Sam", age: 30 }`
// Destructure {id, ...others} out of `{ id: 1, name: "Sam", age: 30 }`
const { id, ...others } = { id: 1, name: "Sam", age: 30 };
// Print `id, others` to the console
// Print `id, others` to the console
console.log(id, others);

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Type Conversion Next Lesson → JS Arrow Functions

JS डिस्ट्रक्चरिंग

Array Destructuring

Object Destructuring

Default Values

Renaming और Nested Destructuring

Destructuring में Rest Operator

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code