In de vorige les leerde je functies schrijven. Nu ga je met arrays werken: geordende lijsten van waarden. Arrays zijn onmisbaar in JavaScript — bijna elke applicatie werkt met lijsten van data.
1 Aanmaken en indexeren
Wat is een array?
Een array is een geordende lijst van waarden tussen vierkante haken [], gescheiden door komma's. De index begint bij 0. Met .length weet je hoeveel elementen er in zitten.
const kleuren = ['rood', 'groen', 'blauw'];
console.log(kleuren[0]); // rood (eerste element)
console.log(kleuren[1]); // groen
console.log(kleuren[2]); // blauw
console.log(kleuren[3]); // undefined (bestaat niet)
console.log(kleuren.length); // 3
// Laatste element ophalen
console.log(kleuren[kleuren.length - 1]); // blauw
// Arrays mogen gemengde typen bevatten
const gemengd = [42, 'tekst', true, null];2 push, pop, shift en unshift
Met vier methoden voeg je elementen toe of verwijder je ze aan het begin of einde van een array.
const fruit = ['appel', 'banaan'];
// Einde
fruit.push('kers'); // voeg toe aan einde
console.log(fruit); // ['appel', 'banaan', 'kers']
const laatste = fruit.pop(); // verwijder van einde
console.log(laatste); // kers
console.log(fruit); // ['appel', 'banaan']
// Begin
fruit.unshift('aardbei'); // voeg toe aan begin
console.log(fruit); // ['aardbei', 'appel', 'banaan']
const eerste = fruit.shift(); // verwijder van begin
console.log(eerste); // aardbei
console.log(fruit); // ['appel', 'banaan']
💡 Onthoud: push/pop werken aan het einde, unshift/shift werken aan het begin. push en unshift voegen toe, pop en shift verwijderen en geven het element terug.
3 forEach — itereren
Wat doet forEach?
.forEach() roept een callback-functie aan voor elk element. Je krijgt het element, de index en de array zelf als parameters. forEach geeft undefined terug — het is puur voor bijeffecten (zoals loggen of DOM-aanpassingen).
const steden = ['Amsterdam', 'Rotterdam', 'Utrecht'];
steden.forEach(function(stad) {
console.log(stad);
});
// Amsterdam
// Rotterdam
// Utrecht
// Met arrow function en index
steden.forEach((stad, index) => {
console.log(index + ': ' + stad);
});
// 0: Amsterdam
// 1: Rotterdam
// 2: Utrecht4 map — transformeren
Wat doet map?
.map() maakt een nieuwe array door elk element te transformeren via een callback. De originele array blijft ongewijzigd. Gebruik map altijd als je een nieuwe lijst wilt op basis van een bestaande.
const getallen = [1, 2, 3, 4, 5];
// Verdubbel elk getal
const verdubbeld = getallen.map(n => n * 2);
console.log(verdubbeld); // [2, 4, 6, 8, 10]
console.log(getallen); // [1, 2, 3, 4, 5] — origineel ongewijzigd
// Strings naar hoofdletters
const namen = ['sara', 'daan', 'lena'];
const hoofdletters = namen.map(n => n.toUpperCase());
console.log(hoofdletters); // ['SARA', 'DAAN', 'LENA']
// Prijzen met 21% BTW
const prijzen = [10, 25, 8];
const metBtw = prijzen.map(p => Math.round(p * 1.21 * 100) / 100);
console.log(metBtw); // [12.1, 30.25, 9.68]5 filter, includes en indexOf
Wat doet filter?
.filter() maakt een nieuwe array met alleen de elementen waarvoor de callback true teruggeeft. .includes() checkt of een waarde in de array zit. .indexOf() geeft de index terug (of -1 als niet gevonden).
const scores = [45, 72, 38, 91, 55, 88];
// Alleen voldoendes (>= 55)
const voldoendes = scores.filter(s => s >= 55);
console.log(voldoendes); // [72, 91, 55, 88]
// Alleen even getallen
const even = scores.filter(s => s % 2 === 0);
console.log(even); // [72, 38, 88]
// includes — zit het er in?
console.log(scores.includes(91)); // true
console.log(scores.includes(99)); // false
// indexOf — op welke positie?
console.log(scores.indexOf(72)); // 1
console.log(scores.indexOf(99)); // -16 Oefening 1: filter en map
Opdracht:
Maak de array getallen = [3, 7, 12, 5, 18, 2, 9]. Gebruik .filter() om de getallen groter dan 8 te selecteren. Gebruik .map() om alle getallen te verdubbelen. Log beide resultaten.
✓ Gebruik .filter() voor getallen > 8
✓ Gebruik .map() om te verdubbelen
✓ Log beide nieuwe arrays
7 Eindopdracht: Fruitlijst
Combineer alles:
Maak een array met 5 fruitnamen. Voeg een 6e toe met push. Verwijder het eerste element met shift. Log de array. Gebruik forEach om elk fruit met zijn indexnummer te loggen. Filter de vruchten waarvan de naam langer is dan 5 tekens.
✓ push aanwezig
✓ shift aanwezig
✓ forEach aanwezig
✓ filter aanwezig
Geweldig! Je beheerst nu de belangrijkste array-methoden.
In les 7 leer je over objecten — sleutel-waardeparen voor complexere datastructuren.
// Array aanmaken en indexeren
const talen = ['HTML', 'CSS', 'JavaScript'];
console.log(talen[0]); // HTML
console.log(talen.length); // 3
// push, pop, shift, unshift
talen.push('PHP');
console.log(talen); // ['HTML', 'CSS', 'JavaScript', 'PHP']
talen.shift();
console.log(talen); // ['CSS', 'JavaScript', 'PHP']
// forEach
talen.forEach((taal, i) => {
console.log(i + ': ' + taal);
});
// map — nieuwe array
const getallen = [1, 2, 3, 4, 5];
const kwadraten = getallen.map(n => n * n);
console.log(kwadraten); // [1, 4, 9, 16, 25]
// filter — nieuwe array
const groot = getallen.filter(n => n > 3);
console.log(groot); // [4, 5]
// includes en indexOf
console.log(talen.includes('CSS')); // true
console.log(talen.indexOf('PHP')); // 2