ऑब्जेक्ट प्रॉपर्टी
लिटरल और डॉट से पढ़ना आपके औज़ार में आ चुका है। असली फ़ॉर्म पर थैला खुद बदलता है: खरीदार रंग चुने तो फ़ील्ड दिखती है, सेव पर ड्राफ्ट झंडा गायब होता है, और शहर पते के अंदर बैठता है। यह पृष्ठ प्रॉपर्टी पर वही रोज़ का काम है।
पहले लिटरल के आगे
ऑब्जेक्ट वाला पृष्ठ थैला बनाकर एक फ़ील्ड पढ़ चुका। यहाँ आप तय करते हैं कौन-सी कुंजियाँ मौजूद रहें: जो नाम गायब था उसे लाएँ, जो अब न चाहिए उसे छोड़ें, पूछें नाम है या नहीं, किसी ऑब्जेक्ट के अंदर रखे ऑब्जेक्ट में कदम रखें, और जो नाम सच में पकड़े हैं उनकी सूची बनाएँ।
एक प्रॉपर्टी पर पाँच चालें
📊 जोड़ना, हटाना, जाँच, नेस्ट, सूची
| चाल | लिखने का ढंग | क्या मिलता है |
|---|---|---|
| जोड़ना | item.color = "blue" |
उसी ऑब्जेक्ट पर नई प्रॉपर्टी |
| हटाना | delete item.draft |
वह कुंजी नहीं रहती |
| मौजूदगी | "sku" in item |
true या false |
| नेस्ट | user.address.city |
दूसरे ऑब्जेक्ट के अंदर का फ़ील्ड |
| सूची | Object.keys(user) |
ऑब्जेक्ट की अपनी कुंजियों की ऐरे |
चाल का नाम लो, पंक्ति अपने आप आती है। जोड़ना दूसरा ऑब्जेक्ट नहीं गढ़ता। हटाना मान को खाली स्ट्रिंग नहीं बनाता। नामों की सूची, एक मान पढ़ने का काम नहीं है।
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);
असाइनमेंट गायब कुंजी को बढ़ाता है
item की शुरुआत सिर्फ़ name और price से हुई। color नहीं था, इसलिए item.color = "blue" उसे बना देता है। ऑब्जेक्ट अब भी एक है, तीन प्रॉपर्टी के साथ। कंसोल blue छापता है।
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);
delete कुंजी को उठा लेता है
delete item.draft वह प्रॉपर्टी हटाता है, पूरा ऑब्जेक्ट नहीं। इसके बाद "draft" in item का मान false है। नाम और कीमत रह जाते हैं। "" या null रखना अलग काम है: कुंजी रहती है, मान नया हो जाता है।
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);
in कुंजी के बारे में हाँ या ना कहता है
"name" in item का मान true है — वह नाम ऑब्जेक्ट पर है। "sku" in item का मान false है — आपने कभी जोड़ा नहीं। गायब प्रॉपर्टी पढ़ने पर undefined मिलता है, और सहेजा हुआ undefined भी वैसा ही पढ़ता है। in कुंजी पूछता है, वहाँ बैठे मान को नहीं।
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);
प्रॉपर्टी दूसरा ऑब्जेक्ट भी पकड़ सकती है
address स्ट्रिंग नहीं है। यह city और zip वाला ऑब्जेक्ट है। user.address.city दो कदम चलता है: पहले address में, फिर city में। कंसोल Shiraz छापता है। नेस्ट करने से पते के टुकड़े साथ रहते हैं, हर एक को सपाट user पर बिछाने की जगह।
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);
Object.keys आपको नाम देता है
Object.keys(user) उस ऑब्जेक्ट की अपनी कुंजियों की ऐरे लौटाता है — यहाँ ["name", "role"]। मान अब भी डॉट या ब्रैकेट से पढ़ते हैं। जब हर नाम पहले से कोड में न लिखना हो, सूची काम आती है। यह अपने आप मान नहीं छापती।
पहले चाल चुनें, फिर टाइप करें
नया फ़ील्ड? असाइन करें। कुंजी गायब होनी चाहिए? delete। हाँ या ना? in। पते के अंदर शहर? नेस्ट करें, फिर डॉट पर चलें। सिर्फ़ नाम? Object.keys। ऑब्जेक्ट पर रखे फ़ंक्शन — मेथड — अगले पाठ के हैं।
जोड़ने के बाद नेस्टेड शहर को पेज पर रखें
उपयोगकर्ता और पते से शुरू करें, स्क्रिप्ट में plan जोड़ें, और शहर को पैराग्राफ़ में बिठाएँ।
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>
पैराग्राफ़ Shiraz — yearly दिखाता है। शहर पहले से नेस्ट था; plan लिटरल के बाद आया। सिर्फ़ city या plan बदलें, रिफ़्रेश करें, नई पंक्ति पढ़ें। अगला पाठ: ऑब्जेक्ट मेथड — वे फ़ंक्शन जो ऑब्जेक्ट पर रहते हैं।
अभ्यास के कदम
- दो प्रॉपर्टी वाला ऑब्जेक्ट बनाएँ, तीसरी असाइनमेंट से जोड़ें और लॉग करें।
draftरखें,deleteसे हटाएँ, और"draft" in itemजाँचें।- जिस ऑब्जेक्ट में सिर्फ़
nameहो,"name" in itemऔर"sku" in itemलॉग करें। addressके अंदरcityनेस्ट करें, फिरuser.address.cityलॉग करें।- दो कुंजी वाले ऑब्जेक्ट का
Object.keysलॉग करें और ऐरे पढ़ें। - HTML डेमो में सिर्फ़
cityयाplanबदलें, रिफ़्रेश करें, पैराग्राफ़ पढ़ें।
बार-बार की चूक
- यह सोचना कि
item.color = "blue"बिलकुल नया ऑब्जेक्ट गढ़ता है — वही ऑब्जेक्ट बढ़ता है delete item.draftकी जगहitem.draft = nullलिखना — कुंजी रह जाती है- गायब कुंजी और सहेजा
undefinedएक ही सवाल मानना — कुंजी के लिएinलें user.cityलिखना जबcityuser.addressपर हो- उम्मीद करना कि
Object.keysमान लौटाए - इस पृष्ठ पर मेथड और
thisढूँढना — वह अगला पाठ है
सार
- गायब कुंजी पर असाइनमेंट वह प्रॉपर्टी जोड़ता है
deleteकुंजी हटाता है; ऑब्जेक्ट का बाकी हिस्सा रहता है"key" in objबताता है कि कुंजी है या नहीं- प्रॉपर्टी दूसरा ऑब्जेक्ट पकड़ सकती है; अतिरिक्त डॉट अंदर चलते हैं
Object.keysनाम लौटाता है, मान नहीं- नेस्टेड फ़ील्ड और नया जोड़ा फ़ील्ड पेज पर एक पंक्ति बाँट सकते हैं
- आगे: ऑब्जेक्ट मेथड — ऑब्जेक्ट पर सहेजे फ़ंक्शन
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी