Arrays

Tot nu toe gebruikte je losse variabelen: let naam1 = 'Anna';, let naam2 = 'Bram';. Voor echte lijsten wordt dat onhandig. Daarvoor is de array:

const namen = ['Anna', 'Bram', 'Chris'];

Een array is een geordende lijst tussen vierkante haken, met komma's tussen de items. Er past van alles in: strings, getallen, booleans.

Een item ophalen: de index

Elk item heeft een index, een positienummer dat bij 0 begint:

const namen = ['Anna', 'Bram', 'Chris'];
console.log(namen[0]);  // 'Anna'
console.log(namen[1]);  // 'Bram'
console.log(namen[2]);  // 'Chris'

Start op 0, niet op 1

Bijna alle programmeertalen tellen vanaf 0. namen[3] bestaat hier niet en geeft undefined.

Toevoegen, veranderen, tellen

namen.push('Daan');         // voegt 'Daan' toe aan het einde
namen[0] = 'Anouk';         // vervangt het eerste item
console.log(namen.length);  // hoeveel items er zijn

Combineren met een loop

Met een loop bewerk je alle items één voor één — de teller i is meteen de index:

const namen = ['Anna', 'Bram', 'Chris'];
for (let i = 0; i < namen.length; i++) {
  console.log('Hallo ' + namen[i]);
}

Door i < namen.length als voorwaarde te nemen, klopt de loop vanzelf nog als de array langer of korter wordt.

Predict

Wat logt dit?

const cijfers = [5, 7, 3, 9];
console.log(cijfers[1]);
console.log(cijfers.length);

Twee regels — welke getallen?

7
4

cijfers[1] is het tweede item (index 0 is de 5, index 1 de 7). cijfers.length is 4, want er staan vier getallen in de array.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Zet een vijfde naam in de array, bijvoorbeeld 'Eva' na 'Daan'. Wat verandert er op de pagina zonder dat je de loop aanpast?
   Antwoord

   Eva staat onderaan de lijst, en de console zegt Totaal: 5 namen. De loop loopt tot namen.length, en die groeit vanzelf mee met de array.
2. Verander namen.length in de loopvoorwaarde in 3. Wie valt er af?
   Antwoord

   Daan. De loop draait alleen voor index 0, 1 en 2, dus voor Anna, Bram en Chris. De console zegt nog wel Totaal: 4 namen, want die regel gebruikt namen.length nog.
3. Zet namen.push('Emma'); op de regel direct onder de array. Waar verschijnt Emma?
   Antwoord

   Onderaan, na Daan, en de console telt nu 5 namen. push zet een item achteraan de array. Zet je de regel boven de array, dan meldt de console JavaScript fout: Uncaught ReferenceError: Cannot access 'namen' before initialization, want de array bestaat dan nog niet.

Editor laden...

Opdracht 1: Jouw lijst

Vervang de namen door vier dingen uit je eigen leven (vrienden, games, gerechten) en zorg dat de console het juiste totaal logt.

Editor laden...

Tip

Alleen de array-literal hoeft anders. De loop en de log gebruiken namen.length, dus die kloppen vanzelf mee.

Antwoord

function toonNamen() {
  const namen = ['Minecraft', 'Rocket League', 'Zelda', 'Stardew Valley'];
  let resultaat = '';

  for (let i = 0; i < namen.length; i++) {
    resultaat = resultaat + namen[i] + '\n';
  }

  document.getElementById('lijst').textContent = resultaat;
  console.log('Totaal: ' + namen.length + ' namen');
}

document.getElementById('knop').addEventListener('click', toonNamen);

Opdracht 2: Lange namen

Pas de loop aan zodat alleen de namen met meer dan vier letters op de pagina komen.

Editor laden...

Tip

Een if binnen de loop. Ook een string heeft een .length: 'Anna'.length is 4.

Antwoord

for (let i = 0; i < namen.length; i++) {
  if (namen[i].length > 4) {
    resultaat = resultaat + namen[i] + '\n';
  }
}

Van de vier startnamen blijft alleen Chris over: de andere drie hebben precies vier letters.

Opdracht 3: Rapport met gemiddelde

Bouw een rapport-knop. Zet je cijfers in een array (bijvoorbeeld [7, 5, 8, 6]). Bij een klik verschijnen alle cijfers onder elkaar, met daaronder een regel "Gemiddelde: " gevolgd door het gemiddelde.

Editor laden...

Tip

Je kunt in dezelfde loop twee dingen verzamelen: de regels in een string, en de som in een getal (totaal = totaal + cijfers[i]). Het gemiddelde is daarna de som gedeeld door cijfers.length.

Antwoord

function toonRapport() {
  const cijfers = [7, 5, 8, 6];
  let resultaat = '';
  let totaal = 0;

  for (let i = 0; i < cijfers.length; i++) {
    resultaat = resultaat + cijfers[i] + '\n';
    totaal = totaal + cijfers[i];
  }

  resultaat = resultaat + 'Gemiddelde: ' + totaal / cijfers.length;
  document.getElementById('uitvoer').textContent = resultaat;
}

document.getElementById('knop').addEventListener('click', toonRapport);

Er gaat iets mis

Index buiten bereik

const namen = ['Anna', 'Bram'];
console.log(namen[2]);  // undefined
console.log(namen[5]);  // undefined

JavaScript geeft géén foutmelding bij een te hoge index — je krijgt stilletjes undefined terug, en dat duikt dan later ergens op als "undefined" op je pagina. Gebruik in een loop altijd i < namen.length als grens, en nooit een vast getal dat je later vergeet bij te werken.