In de vorige les leerde je arrays — lijsten van waarden. Nu ga je objecten leren: sleutel-waardeparen waarmee je complexe data kunt beschrijven. Een gebruiker, een product, een bestelling — bijna alles in een webapp wordt als object opgeslagen.
1 Object literal syntax
Wat is een object?
Een object is een verzameling sleutel-waardeparen tussen accolades {}. De sleutels (ook wel properties of keys) zijn strings. De waarden kunnen van elk type zijn: string, number, boolean, array, of zelfs een ander object.
const student = {
naam: 'Sara',
leeftijd: 21,
actief: true,
vakken: ['HTML', 'CSS', 'JavaScript'],
};
console.log(student);
// { naam: 'Sara', leeftijd: 21, actief: true, vakken: [...] }
// Leeg object aanmaken en later vullen
const config = {};
config.taal = 'nl';
config.versie = 2;2 Properties lezen en schrijven
Er zijn twee manieren om een property te lezen: puntnotatie (obj.sleutel) en haakjesnotatie (obj['sleutel']). Beide werken hetzelfde, maar haakjesnotatie is nodig als de sleutelnaam een variabele is of een spatie bevat.
const auto = {
merk: 'Toyota',
jaar: 2022,
kleur: 'blauw',
};
// Lezen
console.log(auto.merk); // Toyota
console.log(auto['jaar']); // 2022
// Schrijven (bestaande property aanpassen)
auto.kleur = 'rood';
console.log(auto.kleur); // rood
// Nieuwe property toevoegen
auto.km = 15000;
console.log(auto.km); // 15000
// Dynamische sleutel via variabele
const veld = 'merk';
console.log(auto[veld]); // Toyota3 Object methoden
Functies als properties
Je kunt een functie opslaan als property van een object. Zo'n functie heet een methode. Je roept hem aan met object.methode(). Dit is hoe veel ingebouwde JS-methoden werken, zoals console.log().
const rekenmachine = {
optellen: function(a, b) {
return a + b;
},
// Verkorte notatie (hetzelfde resultaat)
aftrekken(a, b) {
return a - b;
},
// Arrow function (let op: anders gedrag voor 'this')
verdubbel: n => n * 2,
};
console.log(rekenmachine.optellen(3, 4)); // 7
console.log(rekenmachine.aftrekken(10, 3)); // 7
console.log(rekenmachine.verdubbel(5)); // 10
4
this in methoden
Wat is this?
Binnen een gewone methode verwijst this naar het object zelf. Zo kan een methode de andere properties van hetzelfde object gebruiken. Let op: in arrow functions werkt this anders — gebruik voor methoden altijd de gewone function-syntax of verkorte methode-syntax.
const persoon = {
naam: 'Daan',
leeftijd: 24,
stelVoor() {
return 'Hoi, ik ben ' + this.naam + ' en ik ben ' + this.leeftijd + ' jaar.';
},
verjaar() {
this.leeftijd += 1;
console.log(this.naam + ' is nu ' + this.leeftijd + '!');
},
};
console.log(persoon.stelVoor()); // Hoi, ik ben Daan en ik ben 24 jaar.
persoon.verjaar(); // Daan is nu 25!
💡 Onthoud: Gebruik geen arrow function als je this nodig hebt in een methode. Arrow functions erven this van de omringende context, waardoor het onverwacht gedrag geeft.
5 Array van objecten
Het meest voorkomende patroon in echte applicaties is een array van objecten. Denk aan een lijst van producten, gebruikers of berichten. Je combineert hier alles wat je al weet: arrays, objecten, forEach, map en filter.
const producten = [
{ naam: 'Laptop', prijs: 899, categorie: 'elektronica' },
{ naam: 'Bureau', prijs: 249, categorie: 'meubels' },
{ naam: 'Muis', prijs: 29, categorie: 'elektronica' },
{ naam: 'Stoel', prijs: 349, categorie: 'meubels' },
];
// forEach — log elk product
producten.forEach(p => {
console.log(p.naam + ': €' + p.prijs);
});
// filter — alleen elektronica
const elektronica = producten.filter(p => p.categorie === 'elektronica');
console.log(elektronica.length); // 2
// map — haal alleen de namen op
const namen = producten.map(p => p.naam);
console.log(namen); // ['Laptop', 'Bureau', 'Muis', 'Stoel']6 Oefening 1: Persoonsobject
Opdracht:
Maak een object persoon met de properties naam, leeftijd en beroep, en een methode stelVoor() die een begroeting logt met this. Roep daarna de methode aan.
✓ Object literal {"{"} aanwezig
✓ Gebruik this. in de methode
✓ Methode wordt aangeroepen
7 Eindopdracht: Productcatalogus
Combineer alles:
Maak een array producten met 3 productobjecten (elk met naam, prijs en categorie). Gebruik forEach om alle namen en prijzen te loggen. Gebruik filter om producten onder €10 te vinden. Gebruik map om 21% BTW toe te voegen aan alle prijzen (afronden op 2 decimalen).
✓ Array van objecten aanwezig
✓ forEach aanwezig
✓ filter aanwezig
✓ map aanwezig
Fantastisch! Je begrijpt nu objecten en de combinatie met arrays.
In les 8 ga je de DOM leren selecteren — zo kun je HTML-elementen lezen vanuit JavaScript.
// Object aanmaken
const gebruiker = {
naam: 'Lena',
leeftijd: 22,
stad: 'Rotterdam',
stelVoor() {
return `Hoi, ik ben ${this.naam} uit ${this.stad}.`;
},
};
console.log(gebruiker.naam); // Lena
console.log(gebruiker['leeftijd']); // 22
console.log(gebruiker.stelVoor()); // Hoi, ik ben Lena uit Rotterdam.
// Nieuwe property toevoegen
gebruiker.beroep = 'developer';
// Array van objecten
const producten = [
{ naam: 'Koffie', prijs: 3.50, categorie: 'dranken' },
{ naam: 'Brood', prijs: 2.20, categorie: 'bakkerij' },
{ naam: 'Melk', prijs: 1.10, categorie: 'zuivel' },
];
// forEach — alle namen en prijzen
producten.forEach(p => {
console.log(p.naam + ': €' + p.prijs);
});
// filter — producten onder €2
const goedkoop = producten.filter(p => p.prijs < 2);
console.log('Goedkoop:', goedkoop.map(p => p.naam));
// map — prijzen met 21% BTW
const metBtw = producten.map(p => ({
...p,
prijs: Math.round(p.prijs * 1.21 * 100) / 100,
}));
console.log(metBtw);