Theory
પાંચ variables જે સાથે જ રહેવાં જોઈએ
FestConnect ની એક નોંધણીમાં નામ, વર્ષ, email, event, અને ચૂકવણીની સ્થિતિ હોય છે. એમને પાંચ છૂટાં variables (name, year, email, ...) તરીકે સંઘરવાનું ઝડપથી ગૂંચવાડાભર્યું બને છે, ખાસ કરીને 200 નોંધણી સાથે: કયું નામ કયા email સાથે જાય?
Object સંબંધિત મૂલ્યોને એક નામ હેઠળ ગુણધર્મો તરીકે બાંધે છે. reg.name, reg.email, reg.paid, બધું એક સુઘડ પોટલામાં. JavaScript ત્રણ જુદી જરૂરિયાત માટે એને બનાવવાની ત્રણ રીત આપે છે.
Theory
લેબલવાળું form સામે છૂટી ચિઠ્ઠીઓ
કાગળની પાંચ છૂટી ચિઠ્ઠીઓ (નામ, વર્ષ, email...) ખોવાવી કે અદલાબદલ થવી સહેલી છે. એક જ ભરેલું form એમને છાપેલાં લેબલ સાથે ભેગી રાખે છે. Object એ જ form છે: એક વસ્તુ, અનેક લેબલવાળાં ખાનાં. અને જો તમને 200 એકસરખાં કોરાં forms જોઈએ, તો તમે દરેક હાથે દોરતા નથી, તમે નમૂનો (constructor) વાપરીને નકલો ભરો છો.
Theory
ત્રણ રીત
- Object literal
{ }: ગુણધર્મો સીધા લખો. એક જ object માટે સૌથી સારું.
let reg = { name: "Aditi", year: 2 };
- new Object(): ખાલી object બનાવો, પછી ગુણધર્મો ઉમેરો. લાંબું, ભાગ્યે જ વપરાય.
let reg = new Object(); reg.name = "Aditi";
- Constructor function: એવો નમૂનો જેને તમે new સાથે બોલાવીને અનેક છાપો છો.
function Registration(n, y){ this.name = n; this.year = y; }
ગુણધર્મ ટપકાથી (reg.name) કે કૌંસથી (reg["name"]) વાંચો.
Practical
એક નોંધણી, પછી અનેક
// 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 કે નમૂનો?
FestConnect ને (a) પાના માટે એક જ settings નું object જોઈએ, અને (b) 200 નોંધણીમાંની દરેક માટે તાજું object બનાવવાની રીત. દરેકને કઈ રીત બંધબેસે છે, અને (b) માટે literal કેમ ખોટું છે?
Show the answer
(a) એક જ settings નું object: object literal { }, એક વારના માટે ઝડપી અને સ્પષ્ટ. (b) 200 નોંધણી: દર વખતે new સાથે બોલાવાતું constructor function, જેથી ગુણધર્મો 200 વાર ફરી લખ્યા વગર દરેક નોંધણીનો આકાર એક જ રહે. (b) માટે literal ખોટું છે કારણ કે તમારે એ જ { name:..., year:..., paid:... } આકાર વારંવાર હાથે લખવો પડે, જે typos અને એમની વચ્ચેના ફેરફારને નોતરે છે.
Quiz
એક student `let a = Registration("Meera", 3);` લખે છે (new વગર) અને પછી `a.name` એ undefined છે. શું ખોટું થયું?
- new વગર constructor એ object બનાવ્યું જ નહીં, એટલે a એ undefined છે અને this ખોટે ઠેકાણે ગયું
- Constructor functions parameters લઈ શકતાં નથી
- Constructor પછી તમારે કૌંસવાળી પહોંચ a["name"] વાપરવી જ પડે
- ગુણધર્મનું નામ મોટા N સાથે Name હોવું જોઈએ
Show the answer
new વગર constructor એ object બનાવ્યું જ નહીં, એટલે a એ undefined છે અને this ખોટે ઠેકાણે ગયું
Constructor ને new સાથે બોલાવવું જ પડે: એ જ તાજું object બનાવે છે અને this ને એની તરફ ચીંધે છે. new વગર બોલાવતાં કોઈ object બનતું નથી, function undefined પાછું આપે છે (એટલે a એ undefined છે), અને this ખોટી વસ્તુનો ઉલ્લેખ કરે છે (A). Constructors parameters બરાબર લે છે (B), ટપકાવાળી પહોંચ ચાલે છે (C), અને ગુણધર્મનું નામ તમે જે સોંપ્યું એ જ છે, અહીં નાના અક્ષરે name (D). હંમેશા new Registration(...).
Watch out
Object ના ફાંદા
1. Constructor પર new ભૂલી જવું: new વગરનું Registration(...) એ undefined પાછું આપે છે અને this ને ખોટે ઠેકાણે ચીંધે છે. હંમેશા new Registration(...).
2. ટપકું સામે કૌંસ: જાણીતાં નામ માટે ટપકું વાપરો (reg.name); જ્યારે ચાવી variable માં હોય (reg[field]) કે એમાં જગ્યાઓ હોય ત્યારે કૌંસ વાપરો.
3. ચાવી અને મૂલ્ય ગૂંચવવાં: { name: "Aditi" } માં, name એ ચાવી છે (અહીં અવતરણચિહ્નની જરૂર નથી) અને "Aditi" એ મૂલ્ય.
Theory
DOM એ એક વિરાટ object છે
Objects ફક્ત તમારો data નથી. હવે પછીનો પાઠ ઉઘાડે છે કે આખું પાનું, એટલે કે DOM, પોતે objects નું વૃક્ષ છે, જ્યાં document એ ગુણધર્મો અને પદ્ધતિઓવાળું object છે જેને તમે બરાબર અહીંના reg.name અને a.paid ની જેમ બોલાવો છો. Browser માં તમે જેને અડો છો એ બધું, elements, events, dates, એ objects છે. આ પાઠ એ બધાની ચાવી છે.
Summary
Key takeaways
- Object સંબંધિત data ને એક નામ હેઠળ key:value ના ગુણધર્મો તરીકે બાંધે છે.
- બનાવવાની ત્રણ રીત: literal { } (એક વારનું), new Object() (લાંબું), constructor વત્તા new (એક આકારના અનેક).
- ગુણધર્મો ટપકાથી (reg.name) કે કૌંસથી (reg["name"]) વાપરો; ચાવી variable માં હોય ત્યારે કૌંસ.
- Constructor this વાપરે છે અને એને new સાથે બોલાવવું જ પડે, નહીં તો કોઈ object બનતું નથી.
- Objects ફક્ત data જ નહીં, પદ્ધતિઓ પણ રાખી શકે છે.
- Memory hook: લેબલવાળું form, અને અનેક નકલો માટેનો નમૂનો.