डिस्ट्रक्चरिंग
डिस्ट्रक्चरिंग JavaScript का ऐसा syntax है जो किसी object की properties या array के items को एक pattern के अनुसार variables में रखता है। मूल object या array नहीं बदलता। हम यह order इस्तेमाल करेंगे:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
object की बुनियादी डिस्ट्रक्चरिंग
{} के भीतर लिखे नाम, दाईं ओर के object से उसी नाम की properties चुनते हैं। इससे दो नए constants बनते हैं।
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
पहले lida और फिर tea मिलता है। यह order.guest और order.drink पढ़ने का छोटा तरीका है; order से कुछ हटता नहीं है।
नाम बदलना और default देना
property: variable से variable का नया नाम चुना जाता है। = के बाद का default केवल तब लगता है जब property का मान undefined हो।
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer में lida आता है। size मौजूद नहीं है, इसलिए उसे regular मिलता है। इस pattern से guest नाम का variable नहीं बनता।
nested property पढ़ना
Nested pattern object की बनावट का अनुसरण करता है। अंदर का { city }, order.address से city पढ़ता है।
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
Output rasht है और address नाम का variable नहीं बनता। यदि address गायब या undefined हो, तो city निकालते समय error आ सकता है। इस pattern के भीतर optional chaining नहीं लिख सकते; पहले value जाँचें या सामान्य बनाएँ।
array डिस्ट्रक्चरिंग
[] items को उनकी position के आधार पर variables में रखता है। पहला variable index 0 और दूसरा index 1 लेता है।
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
Output पहले mint, फिर lemon है। Variable के नाम आप चुनते हैं, लेकिन value position तय करती है। order.extras में दोनों items बने रहते हैं।
function parameter में डिस्ट्रक्चरिंग
Function अपने parameter में ही मिले object को खोल सकता है। नीचे के function को केवल guest और drink चाहिए।
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
Call का परिणाम lida ordered tea है। Parameter pattern call के समय चलता है; यदि function तैयार न हो तो null या undefined देने पर error आएगा।
पूरा page demo
यह page object, array और parameter डिस्ट्रक्चरिंग को जोड़कर order का सार दिखाता है।
<!doctype html>
<html lang="hi">
<head><meta charset="utf-8"><title>JavaScript डिस्ट्रक्चरिंग</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
Page पर ठीक lida / tea / mint दिखाई देता है। Function केवल जरूरी data पढ़ता है और order को नहीं बदलता।
include_try
drink को beverage नाम दें और गायब table property के लिए default जोड़ें। फिर बिना address वाला order बनाकर nested pattern से पहले उसे जाँचें।
mistakes
Property के नाम को renamed variable न समझें। Default null को नहीं बदलता और nested object हमेशा मौजूद हो, यह जरूरी नहीं। {} properties के लिए और [] array positions के लिए है; स्रोत नहीं बदलता। Rest और spread अगली spread-rest session में हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी