Theory
पाँच variables जो साथ रहनी चाहिए
एक FestConnect registration में एक name, year, email, event, और paid status है। इन्हें पाँच अलग variables के रूप में store करना (name, year, email, ...) जल्दी गड़बड़ हो जाता है, ख़ासकर 200 registrations के साथ: कौन सा name किस email के साथ जाता है?
एक object related values को एक नाम के नीचे properties के रूप में bundle करता है। reg.name, reg.email, reg.paid, सब एक साफ़ package में। JavaScript एक बनाने के तीन तरीक़े देती है, तीन अलग needs के लिए।
Theory
एक labelled form बनाम loose slips
पाँच loose paper slips (name, year, email...) आसानी से खो जाते हैं या mismatch हो जाते हैं। एक अकेला भरा हुआ form उन्हें printed labels के साथ साथ रखता है। एक object वह form है: एक चीज़, कई labelled fields। और अगर आपको 200 identical blank forms चाहिए, आप हर एक को हाथ से नहीं draw करते, आप एक template (एक constructor) इस्तेमाल करते हैं और copies भरते हैं।
Theory
तीन तरीक़े
- Object literal
{ }: properties सीधे लिखिए। एक अकेले object के लिए best।
let reg = { name: "Aditi", year: 2 };
- new Object(): एक empty object बनाइए, फिर properties जोड़िए। Verbose, कम इस्तेमाल होता है।
let reg = new Object(); reg.name = "Aditi";
- Constructor function: एक template जिसे आप कई stamp out करने के लिए new से call करते हैं।
function Registration(n, y){ this.name = n; this.year = y; }
एक property dot से पढ़िए (reg.name) या bracket से (reg["name"])।
Practical
एक registration, फिर कई
// 1. literal: quickest for one object
let reg = { name: "Aditi", year: 2, paid: false };
console.log(reg.name); // "Aditi" (dot access)
console.log(reg["year"]); // 2 (bracket access)
reg.paid = true; // update a property
// 2. new Object(): the long way
let reg2 = new Object();
reg2.name = "Ravi";
// 3. constructor: a template for MANY registrations
function Registration(name, year) {
this.name = name;
this.year = year;
this.paid = false;
}
let a = new Registration("Meera", 3);
let b = new Registration("Sana", 1);
console.log(a.name, b.name); // "Meera" "Sana"This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
एक object या एक template?
FestConnect को चाहिए (a) page के लिए एक अकेला settings object, और (b) 200 में से हर registration के लिए एक fresh object बनाने का एक तरीक़ा। हर एक के लिए कौन सा creation method suit करता है, और (b) के लिए एक literal ग़लत क्यों है?
Show the answer
(a) अकेला settings object: एक object literal { }, एक-बार के लिए quick और clear। (b) 200 registrations: हर बार new से call की गई एक constructor function, तो हर registration की वही shape होती है बिना 200 बार properties फिर लिखे। (b) के लिए एक literal ग़लत है क्योंकि आप वही { name:..., year:..., paid:... } shape बार-बार हाथ से type करेंगे, typos और उनके बीच drift को invite करते हुए।
Quiz
एक student `let a = Registration("Meera", 3);` (बिना new) लिखता है और फिर `a.name` undefined है। क्या ग़लत हुआ?
- new के बिना, constructor ने एक object नहीं बनाया, तो a undefined है और this leak हो गया
- Constructor functions parameters नहीं ले सकते
- एक constructor के बाद आपको bracket access a["name"] इस्तेमाल करना ज़रूरी है
- Property का नाम एक capital N के साथ Name होना चाहिए
Show the answer
new के बिना, constructor ने एक object नहीं बनाया, तो a undefined है और this leak हो गया
एक constructor को new से call करना ज़रूरी है: यही वह है जो एक fresh object बनाता है और this को उस पर point करता है। बिना new call करने पर, कोई object नहीं बनता, function undefined return करता है (तो a undefined है), और this ग़लत चीज़ को refer करता है (A)। Constructors parameters ठीक लेते हैं (B), dot access काम करता है (C), और property का नाम वही है जो आपने assign किया, यहाँ lowercase name (D)। हमेशा new Registration(...)।
Watch out
Object traps
1. एक constructor पर new भूलना: Registration(...) बिना new के undefined return करता है और this को ग़लत point करता है। हमेशा new Registration(...)।
2. Dot बनाम bracket: जाने-पहचाने नामों के लिए dot इस्तेमाल कीजिए (reg.name); brackets तब इस्तेमाल कीजिए जब key एक variable में हो (reg[field]) या इसमें spaces हों।
3. Keys और values को confuse करना: { name: "Aditi" } में, name key है (यहाँ quotes की ज़रूरत नहीं) और "Aditi" value है।
Theory
DOM एक giant object है
Objects सिर्फ़ आपका data नहीं हैं। अगला lesson reveal करता है कि पूरा page, DOM, ख़ुद objects का एक tree है, जहाँ document एक object है properties और methods के साथ जिन्हें आप बिल्कुल यहाँ के reg.name और a.paid जैसे call करते हैं। Browser में आप जो भी छूते हैं, elements, events, dates, एक object है। यह lesson उन सबकी key है।
Summary
Key takeaways
- एक object related data को एक नाम के नीचे key:value properties के रूप में bundle करता है।
- बनाने के तीन तरीक़े: literal { } (एक-बार), new Object() (verbose), constructor + new (एक shape के कई)।
- Properties को dot (reg.name) या bracket (reg["name"]) से access कीजिए; brackets तब जब key एक variable में हो।
- एक constructor this इस्तेमाल करता है और इसे new से call करना ज़रूरी है, वरना कोई object नहीं बनता।
- Objects methods भी रख सकते हैं, सिर्फ़ data नहीं।
- Memory hook: एक labelled form, और कई copies के लिए एक template।