Wat zijn objecten?
Een object is een verzameling van samenhorende data en functies dat tussen accolades staat. De data worden de eigenschappen van het object genoemd. De functies opereren op deze eigenschappen en worden de methoden van het object genoemd. Samen vormen eigenschappen en methoden de leden van het object.
voorbeeld:
const john = {
// eigenschappen
firstName: ‘John’,
lastName: ‘Smith’,
birthYear: 1990,
job: ‘teacher’,
isMarried: false,
//methoden
calcAge() {
return 2020 - this.birthYear;
} };Wat is een object literal?
Men spreekt over een object literal wanneer een object als volgt wordt gedefinieerd:
const user = {
firstName: ‘Jimmy’,
lastName: ‘Da SIlva’,
}
Hoe kan je twee objecten nesten?
const obj1 = {
// …
}
const obj2 = {
obj1,
// …
}
Er zijn twee manieren (notaties) waarop we toegang kunnen krijgen tot de leden van een object. hoe noemen deze twee notaties en wat is het verschil?
Dot notatie: obj.someName
Bracket notatie: obj[someName]
Het verschil tussen beiden is dat het bij de bracket notatie mogelijk is om eender welke expressie te plaatsen tussen de vierkante haken:
let namekey = ‘Name’;
obj[‘first’ + namekey];
obj[‘last’ + namekey];
Welke waarde krijgen we terug wanneer we een lid van een object opvragen die niet bestaat?
undefined
Soms kan het zijn dat we een methode van een object meerdere malen moeten uitvoeren zoals bijvoorbeeld:
obj.calcAge();
obj.calcAge();
obj.calcAge();
obj.calcAge();
Indien calcAge een zware operatie is, dan heeft dit negatieve gevolgen voor de performantie van het programma. Wat zou een oplossing kunnen zijn om de performantie te verbeteren?
De oplossing zou zijn om ervoor te zorgen dat de methode het resultaat van zijn berkening opslaat als eigenschap van dat object, bijvoorbeeld:
const user = {
calcAge: function () {
// age eigenschap wordt aangemaakt
this.age = 2020 - this.birthYear;
// en wordt ook meteen teruggegeven.
return this.age;
},
};
Door dit te doen moet de methode maar 1 keer worden opgeroepen en uitgevoerd. De andere keren kan gewoon de age eigenschap opgevraagd worden:
obj.calcAge();
obj.age;
obj.age;
obj.age;
Waarvoor worden factories en constructors gebruikt en wat is het verschil tussen beiden?
Zowel factories als constructors zijn functies die worden gebruikt om objecten aan te maken. Het verschil tussen beiden is de manier waarop ze een object aanmaken.
Een factory is een functie dat in zijn body een object definieert en dat object teruggeeft:
function createCircle(radius) {
return {
radius,
draw() {
console.log(“Drawing”);
},
};
}
// aanmaak van een circle object
const c1 = createCircle(5);
Een constructor functie is een functie dat eigenschappen en methoden toevoegd aan een leeg object door gebruik te maken van this:
function Circle(radius) {
this.radius = radius;
this.draw = function () {
console.log(“Drawing”);
};
}
// aanmaak van een circle object
const c2 = new Circle(5);
Merk op dat bij constructors het new keyword gebruikt wordt om een object aan te maken.
Een ander verschil is dat de namen van constructors beginnen met een hoofdletter.
Wanneer een object wordt aangemaakt met een constructor dan zal het new keyword worden gebruikt. Wat doet new?
new zal:
- een nieuw leeg object aanmaken
- De this waarde van de constructor functie koppelen aan het adres van dit nieuwe object.
- Het kopieert de waarde van de prototype eigenschap van de constructor, naar de [[ Prototype ]] eigenschap van het nieuwe aangemaakte object, m.a.w.:
obj.[[ Prototype ]] = ConstFunc.prototype - De operand van new wordt geëvalueerd. Deze evaluatie resulteert in een oproep van de constructor functie waardoor het object geïnitialiseerd wordt.
- Het resulataat van deze evaluatie wordt dan teruggegeven. Normaal is dit het geïnitialiseerde object, tenzij dat de constructor een ander object teruggeeft in zijn body.
Elk object in javascript (ook functies want deze zijn achter de schermen ook objecten) bezit een constructor eigenschap. Wat geeft deze constructor eigenschap terug?
De constructor functie van het object.
Stel dat je twee objecten c1 en c2 hebt waarbij object c1 is aangemaakt door de factory createCircle en object c2 is aangemaakt door de constructor Circle. Wat is dan het resultaat van volgende expressies?
- c1.constructor;
- c2.constructor;
Verklaar je antwoord.
- Object() { [native code] }
- Circle(radius){}
Het resultaat van de eerste expressie geeft niet de factory functie terug maar wel de ingebouwde Object constructor. Deze constructor is ingebouwd in javascript en wordt gebruikt wanneer we een object literal definieren. Omdat we dergelijke definitie ook gebruiken in de body van een factory, zal de Object constructor worden gebruikt om het object aan te maken. Dit is ook waarom deze constructor wordt teruggegeven.
Het resultaat van de tweede expressie geeft gewoonweg de zelfgedefinieerd constructor terug.
Met welke loop kunnen we doorheen de key-value paren van een object itereren? Geef een voorbeeld van hoe we zowel de keys als hun bijhorende values kunnen printen in de console.
Dit kan met de for-in loop, bijvoorbeeld
const person = new Person();
// print alle keys en values
for (let key in person) {
console.log(key, person[key]);
}
gegeven is het volgend object: const person = new Person();
Wat is de returnwaarde van de volgende expressies?
- Object.keys(person);
- Object.values(person);
- Object.entries(person);
- Een array van keys
- Een array van waarden
- Een array van key-value paren
Waarvoor en hoe wordt de if-in statement gebruikt.
Met de if-in statement kan nagegaan worden of een object een bepaalde key bezit. als dat het geval is dan zal de body van de if-in worden uitgevoerd. bijvoorbeeld:
if(‘firstName’ in person){
console.log(person has a first name);
}
Geef drie manieren hoe we de leden van een object kunnen kopieren in een ander object.
- Door te itereren doorheen het object met de for in loop en gaandeweg de key value paren van het ene object kopieren in de andere, bijvoorbeeld:
// leden van object circle worden gekopieerd in object another
for (let key in circle) {
another[key] = circle[key];
}
- Door gebruik te maken van Object.assign, bijvoorbeeld:
Object.assign(another, circle);
- Door gebruik te maken van de spread operator, bijvoorbeeld:
const another = {
…circle,
}
- Wat zijn private leden van een object?
- Hoe kan je een lid privaat maken in een constructor functie?
- Zijn private data en functies ook eigenschappen en methoden?
- In welk geval is het goed om private leden te definiëren?
- Private leden zijn leden die enkel toegankelijk zijn voor eigenschappen en methoden binnen het object zelf. Ze hebben als het ware een lokale scope.
- Om een lid privaat te maken, moet je deze gewoon lokaal aan de constructor functie definiëren door gebruik te maken van let, const of function in plaats van this. bijvoorbeeld:
function Circle(radius){
this.radius = radius;
let defaultLocation = { x: 0, y: 0 };
function computeOptimumLocation() {
// do some
}
this.draw = function () {
// wordt opgeroepen zonder this keyword
computeOptimumLocation();
console.log(`draw`);
}; }- Technisch gezien zijn private data geen eigenschappen en private functies geen methoden.
- Wanneer we data en methoden nodig hebben die enkel moeten dienen als hulp bij de uitvoer van een andere methode of evaluatie van een andere expressie, dan is het in dat geval beter om die hulpdata en hulpfuncties als privaat te definiëren.
- Waarvoor dienen getters en setters?
- Wat kan je zeggen over de manier waarop ze worden geïmplementeert en de manier waarop ze worden gebruikt?
- Indien we voor een bepaalde eigenschap enkel een getter definiëren is het dan mogelijk om deze eigenschap nadien aan te passen? Waarom?
- Indien we voor een bepaalde eigenschap enkel een setter definiëren, is het dan mogelijk om de waarde van deze eigenschap nadien op te vragen? Waarom?
- Een getter is een methode dat gebruikt wordt om een waarde uit een object te verkrijgen (read-only) en een setter is een methode dat gebruikt wordt om een waarde van een object aan te passen (write-only).
- Ze worden beiden geïmplementeerd als methoden maar ze worden gebruikt alsof het eigenschappen zijn
- Neen, omdat een getter een ‘read only’ operatie is. Zonder een setter is het daarom enkel mogelijk om de waarde uit te lezen.
- Neen, omdat een setter een ‘write only’ operatie is. Zonder een getter is het daarom enkel mogelijk om de waarde aan te passen.
Hoe definieer je een getter en een setter in:
1. Een object literal
2. Een factory function
3. Een constructor function
4. Een klasse
- Om een getter en setter te definiëren in een object literal gebruik je de get en set keywords die je voor de methode definitie plaatst.
2.Omdat een factory in zijn body een object literal aanmaakt en teruggeeft. Kan je gewoonweg de get en set methoden gebruiken in deze object literal.
3.Bij constructor functies moeten we de Object.defineProperty methode gebruiken. Deze methode neemt drie argumenten: het object waarvoor de getter en setter moet worden gedefinieerd, de naam van de eigenschap waarvoor een getter of setter wordt gedefinieerd, en een configutratie object. We kunnen dan als volgt een getter en setter definieëren:
function Person(firstName, lastName) {
// eigenschappen
Object.defineProperty(this, 'fullName', {
get: function () {
// body
},
set: function (value) {
// body
},
}); }Merk op dat de setter functie een value parameter heeft. Deze parameter stelt de nieuwe waarde voor die aan de eigenschap ‘fullName’ zal worden gekoppeld.
- Bij klassen kan je ook gewoon de get en set keywords gebruiken om een getter en setter te implementeren.
- Stel dat je voor een bepaalde eigenschap enkel een getter hebt gedefinieerd. Nadien probeer je dan ergens in de code toch de waarde voor die eigenschap aan te passen. Wat is dan de output in ‘sloppy’ mode en in strict mode?
- Stel dat je voor een bepaalde eigenschap enkel een setter hebt gedefinieerd. Nadien probeer je dan ergens in de code toch de waarde voor die eigenschap op te vragen. Wat is dan de output in ‘sloppy’ mode en in strict mode?
- In strict mode zal je een foutmelding krijgen die zegt dat je de waarde niet mag aanpassen. In normal mode zal de waarde dat je probeert aan te passen niet aangepast worden maar zal je ondanks dat, geen foutmelding krijgen.
- Zowel in normal mode als in strict mode zal de waarde undefined zijn.
Wat is method chaining? Geef een voorbeeld?
Methoden van een object die na elkaar worden uitgevoerd door de methode-oproepen aan elkaar te ketenen door middel van een punt. bijvoorbeeld:
const res = someObject.someMethod().anotherMethod();
Wat is optional chaining? Geef een voorbeeld.
Met de optional chaining operator (?.) kan je de waarde lezen van een eigenschap die zich diep in een reeks van verbonden objecten bevindt zonder dat je hoeft na te gaan of elke verwijzing wel degelijk bestaat.
Bijvoorbeeld: stel we willen de openingsuren op maandag van een bepaald restaurant bemachtigen. Dit zou dan als volgt kunnen:
restaurant.openingHours.mon.open;
Het probleem is echter dat we niet weten of de eigenschappen ‘openingHours’ en ‘mon’ wel bestaan. We moeten dit daarom eerst nagaan alvorens we dieper ‘graven’. DIt kan makkelijk met de optional chaining operator (?):
restaurant.openingHours?.mon?.open;
Bestaat de eigenschap niet dan zal meteen undefined worden teruggegeven. Anders zal dieper ‘gegraven’ worden.
Optional chaining werkt ook indien we willen nagaan of een methode bestaat alvorens we deze oproepen:
restaurant.order?.(0, 1)
