Destructuring and spread/rest

ऑब्जेक्ट्स और arrays से डेटा को साफ़-सुथरे ढंग से निकालें, फिर spread ऑपरेटर से संरचनाओं की कॉपी और मर्ज करें।

8 मिनट · 3 प्रश्न

जब आप किसी API से डेटा प्राप्त करते हैं, तो अक्सर आपको केवल कुछ ही प्रॉपर्टीज़ की ज़रूरत होती है। Destructuring इन्हें एक ही पंक्ति में निकाल लेता है, साथ ही इनका नाम बदलने, नेस्टेड ऑब्जेक्ट्स तक पहुँचने और प्रॉपर्टी के गायब होने पर एक डिफ़ॉल्ट मान देने का विकल्प भी।

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

Destructuring arrays पर भी काम करता है, इस बार स्थिति के आधार पर। इसका सबसे प्रोफ़ेशनल उपयोग फ़ंक्शन पैरामीटर्स में रहता है: एक अपारदर्शी ऑब्जेक्ट प्राप्त करने के बजाय, signature ठीक-ठीक घोषित करता है कि कौन सी प्रॉपर्टीज़ अपेक्षित हैं। कोड खुद-ब-खुद दस्तावेज़ीकृत हो जाता है।

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

वही ... ऑपरेटर के दो रूप हैं। spread के रूप में, यह किसी array या ऑब्जेक्ट को कॉपी या मर्ज करने के लिए उसका विस्तार करता है: डिफ़ॉल्ट सेटिंग्स लागू करके फिर उन्हें ओवरराइड करने में व्यापक रूप से इस्तेमाल होता है। rest के रूप में, यह "जो कुछ बचा है" उसे एक array में इकट्ठा करता है, उदाहरण के लिए एक परिवर्तनशील संख्या के तर्क स्वीकार करने के लिए।

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

क्विज़ पर जाने से पहले एक मानसिक अभ्यास: { ...baseConfig, ...overrides } में, अगर दोनों ऑब्जेक्ट lang को परिभाषित करें तो क्या होता है? आखिर में लिखा गया जीतता है। क्रम की यही बारीकी वही चीज़ है जो "पहले डिफ़ॉल्ट फिर ओवरराइड" पैटर्न को संभव बनाती है।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. const { city } = user; पंक्ति क्या करती है?
   • यह एक city वेरिएबल बनाती है जिसमें user.city होता है
   • यह user ऑब्जेक्ट का नाम बदलकर city कर देती है
   • यह city नाम का एक नया खाली ऑब्जेक्ट बनाती है
2. function log(...args) में, फ़ंक्शन के अंदर args क्या है?
   • एक key-value ऑब्जेक्ट
   • एक असली array जिसमें प्राप्त किए गए सभी तर्क होते हैं
   • एक स्ट्रिंग
   • केवल पहला तर्क
3. const copy = { ...original }; के बाद, क्या नेस्टेड ऑब्जेक्ट्स की नकल हो जाती है?
   • हाँ, कॉपी पूरी तरह स्वतंत्र होती है
   • नहीं, वे साझा रहते हैं: कॉपी उथली होती है
   • उन्हें कॉपी से हटा दिया जाता है