JavaScript objecten: aanmaken, lezen, wijzigen, doorlopen, verwijderen

In het vorige hoofdstuk konden we met functies instructies bundelen. Objecten bundelen gegevens: een gebruiker, een product, een API-antwoord zijn objecten. Het is de structuur die je in JavaScript het meest gebruikt, en dit hoofdstuk behandelt ze volledig, van het aanmaken tot het kopiëren.

Wat is een object in JavaScript?

Een object is een verzameling eigenschappen, elk bestaand uit een sleutel (een naam) en een waarde. De waarde kan van elk type zijn: string, getal, boolean, array, een ander object, of een functie. Als je de dictionaries van Python of de associatieve arrays van PHP kent, is het idee hetzelfde.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

De accolades begrenzen het object, elke eigenschap wordt geschreven als clé: valeur, de eigenschappen worden gescheiden door komma’s. De komma na de laatste eigenschap is toegestaan en maakt toevoegen makkelijker.

Een object aanmaken

Letterlijke notatie

Dat is de vorm uit het voorbeeld hierboven, en het is de vorm die je in de meeste gevallen gebruikt. Een leeg object schrijf je als {}, en je kunt het daarna vullen:

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Een constructorfunctie

Als je meerdere objecten met dezelfde vorm nodig hebt, maakt een functie die je met new aanroept ze aan. Daarbinnen verwijst this naar het object dat wordt aangemaakt.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Deze schrijfwijze is de voorloper van klassen, die je later nog tegenkomt: class Telephone { constructor(marque, prix, stock) { … } } doet hetzelfde met een duidelijkere syntaxis. Je komt constructorfuncties nog geregeld tegen in bestaande code.

Ten slotte maakt ook new Object() een leeg object, maar dat biedt niets extra’s ten opzichte van {}: het wordt niet meer gebruikt.

Een eigenschap lezen

Twee syntaxvormen, gelijkwaardig in het eenvoudige geval:

console.log(personne.nom);     // 'Jean'   : puntnotatie
console.log(personne['nom']);  // 'Jean'   : haakjesnotatie

De blokhaken worden onmisbaar in twee situaties: wanneer de sleutel in een variabele zit, en wanneer ze tekens bevat die niet na een punt kunnen staan.

const cle = 'age';
console.log(personne[cle]);            // 30: de sleutel komt uit een variabele

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont': spatie in de sleutel

Het lezen van een eigenschap die niet bestaat, veroorzaakt geen fout: het resultaat is undefined.

console.log(personne.pays);   // undefined

Een eigenschap lezen van een ontbrekende eigenschap crasht daarentegen: personne.adresse.ville geeft de foutmelding “Cannot read properties of undefined”. Optional chaining met ?. voorkomt de fout:

console.log(personne.adresse?.ville);   // undefined, geen fout

Wijzigen en toevoegen

Dezelfde toewijzing wijzigt een bestaande eigenschap of maakt een nieuwe aan:

personne.age = 31;            // wijziging
personne.pays = 'France';     // toevoeging: de eigenschap bestond nog niet
personne['ville'] = 'Lyon';   // wijziging, haakjesnotatie

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Let op met const: het voorkomt dat je de variabele personne opnieuw toewijst aan een ander object, niet dat je het object zelf wijzigt. Dat is bewust zo, en het is handig. Om elke wijziging te verbieden, bevriest Object.freeze(personne) het object (toewijzingen worden dan genegeerd in non-strict mode, en geweigerd in strict mode).

Een eigenschap verwijderen en het bestaan ervan testen

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false: de sleutel bestaat niet meer
console.log(Object.hasOwn(personne, 'nom')); // true  : de sleutel bestaat, als eigen eigenschap van het object

delete verwijdert de eigenschap. Gebruik voor het controleren van een sleutel liever in of Object.hasOwn() dan een test op undefined: een eigenschap kan bestaan met de waarde undefined.

Methoden: functies in een object

Een eigenschap waarvan de waarde een functie is, heet een methode. Binnen een methode verwijst this naar het object dat ze bevat.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Een object doorlopen

Drie statische methoden geven de inhoud van een object terug als array, waardoor je alles kunt gebruiken wat je al weet over loops:

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3: het ‘aantal eigenschappen’

De lus for…in bestaat ook en doorloopt de sleutels rechtstreeks. Ze haalt echter ook eigenschappen op die zijn geërfd van het prototype, wat verrassend is zodra je objecten van bibliotheken gebruikt: Object.keys() met for…of is de standaardkeuze.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

De omgekeerde bewerking, een object opnieuw opbouwen vanuit paren, doe je met Object.fromEntries():

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Geneste objecten en arrays van objecten

Een waarde kan een object zijn: zo representeer je een structuur. En een array van objecten is de meest voorkomende vorm van gegevens die van een API komen.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Gegevens van een server komen binnen als JSON-tekst, waarvan de syntaxis dezelfde is als die van objectliterals: JSON.parse(texte) zet het om in een object, JSON.stringify(objet) doet het omgekeerde.

Een object kopiëren zonder verrassingen

Een object toewijzen aan een andere variabele kopieert het niet: beide variabelen wijzen naar hetzelfde object in het geheugen.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul': het was geen kopie

De spread-operator kopieert het eerste niveau, maar geneste objecten blijven gedeeld:

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  : het eerste niveau is wel gekopieerd
console.log(original.adresse.ville);  // 'Lyon'  : het geneste object wordt gedeeld

Voor een volledige kopie, onafhankelijk op elk niveau, is structuredClone() de functie die daarvoor bedoeld is:

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon': het origineel is niet veranderd

structuredClone kopieert geen methoden: gebruik het alleen voor objecten met data. Ten slotte voegt Object.assign(cible, source) objecten samen, met dezelfde oppervlakkige kopie als de spread-operator.

Overzicht

Op weg naar objectgeoriënteerd programmeren

Wanneer meerdere objecten dezelfde vorm en dezelfde methoden delen, beschrijf je ze één keer in een klasse en maak je er instanties van met new. Dat is het natuurlijke vervolg op dit hoofdstuk: Klassen in JavaScript en Introductie tot klassen en objecten (ES6). Voor nu behandelt het volgende hoofdstuk een object dat de taal zelf levert, Math, en de bijbehorende methoden.