Objecten

Een object groepeert samenhangende waarden onder namen. In { name: "Coco", age: 3 } geeft pet.name "Coco" en pet.age geeft 3.

Waarden met labels

Een array is handig voor een lijst soortgelijke dingen op volgorde. Veel dingen in de wereld kun je beter beschrijven met benoemde feiten: een huisdier heeft een naam, een soort en een leeftijd; een product heeft een titel, een prijs en een voorraad. Een object slaat precies dat op. Het is een verzameling eigenschappen en elke eigenschap bestaat uit een sleutel (het label) gekoppeld aan een waarde.

const pet = {
  name: "Coco",
  kind: "cat",
  age: 3,
};
console.log(pet.name);        // Coco
console.log(pet["kind"]);     // cat
console.log(pet.age + 1);     // 4

Je schrijft een object tussen accolades, met elke eigenschap als key: value en komma's ertussen. Een komma na de laatste eigenschap is toegestaan. Om een eigenschap te lezen, schrijf je het object, een punt en de sleutel: pet.name. De andere vorm gebruikt vierkante haken en een string, pet["kind"]. Haken zijn nodig als de sleutel in een variabele staat, zoals pet[field], of een spatie bevat. Een niet-bestaande sleutel lezen geeft undefined.

Eigenschappen veranderen en toevoegen

Ken een waarde aan een eigenschap toe om die te veranderen en aan een nieuwe sleutel om er een toe te voegen. Net als bij arrays werkt dit ook als het object met const is gedeclareerd, omdat de variabele nog naar hetzelfde object verwijst.

const player = { name: "Sam", score: 0 };
player.score += 10;
player.level = 2;
console.log(`${player.name} ${player.score} ${player.level}`);   // Sam 10 2
delete player.level;
console.log(player.level);   // undefined

Lijsten met objecten

Arrays en objecten passen goed bij elkaar. De meeste programma's bewaren gegevensrijen als een array van objecten: een winkelmandje, een klassenlijst, een reeks zoekresultaten. Je loopt met een lus door de array en leest van elk object de benodigde eigenschappen.

const basket = [
  { item: "pen", price: 2 },
  { item: "book", price: 12 },
  { item: "bag", price: 25 },
];
let total = 0;
for (const line of basket) {
  total += line.price;
}
console.log("Total:", total);   // Total: 39

Waarden binnen een object kunnen alles zijn, ook arrays en andere objecten. Met const user = { name: "Ana", tags: ["admin", "editor"] }; kun je user.tags[0] schrijven om bij "admin" te komen. Lees zulke ketens van links naar rechts: begin bij user, ga naar de eigenschap tags en neem dan index 0.

Methoden en de sleutels van een object

Een eigenschap met een functie als waarde heet een methode. Je hebt al die tijd methoden aangeroepen: console.log is de methode log van het object console en Math.round is de methode round van Math. Binnen een methode verwijst het sleutelwoord this naar het object waarop de methode is aangeroepen, zodat een methode de eigenschappen van haar eigen object kan lezen. Ten slotte geeft Object.keys(pet) een array van sleutels, hier ["name", "kind", "age"], handig om elke eigenschap met een lus langs te gaan.

const counter = {
  count: 0,
  add() {
    this.count++;
  },
};
counter.add();
counter.add();
console.log(counter.count);   // 2

Uitgewerkt voorbeeld. Een boekrecord { title: "Notes", pages: 120, read: 45 } kan voortgang tonen met Math.round(book.read / book.pages * 100), wat 38 is, dus 38 procent. De waarden pages en read noemen maakt de formule leesbaar op een manier die b[1] / b[0] nooit zou zijn.

Array of object?

Met een snelle test bepaal je welke je gebruikt. Als de waarden hetzelfde soort dingen zijn en de volgorde ertoe doet, zoals klassenscores of receptstappen, gebruik dan een array en benader ze op positie. Als de waarden verschillende feiten over één ding zijn, zoals naam, prijs en voorraad van een product, gebruik dan een object en benader ze op naam. De meeste echte gegevens mengen beide: een array van producten, waarbij elk product een object is. Als je een object in het oefenvak afdrukt, zie je een compacte vorm zoals {"name":"Coco","age":3}; afzonderlijke eigenschappen lezen geeft overzichtelijkere uitvoer.