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 het zelf.

Editor laden...

Investigate

Experimenteer in het veld hierboven:

• Zet een vijfde naam in de array. Wat verandert er op de pagina zonder dat je de loop aanpast?
• Verander namen.length in de loopvoorwaarde in 3. Wie valt er af?
• Zet namen.push('Emma'); op de eerste regel van de functie. Waar verschijnt Emma?

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.