Loops

Soms wil je dezelfde actie meerdere keren uitvoeren: een tafel printen, tien sterretjes tonen. In plaats van tien keer dezelfde regel typen, gebruik je een loop.

De for-loop: vooraf bekend aantal keer

for (let i = 0; i < 5; i++) {
  console.log('Hallo.');
}

Lees dit als: start met i = 0, blijf herhalen zolang i < 5, en verhoog i na elke ronde met 1. Resultaat: Hallo. verschijnt vijf keer in de console.

De drie onderdelen tussen de haakjes:

• Beginwaarde: let i = 0, een tellervariabele (vaak i).
• Voorwaarde: i < 5. Zolang dit true is, blijft de loop draaien.
• Stap: i++, wat er na elke ronde gebeurt (i++ is de korte vorm van i = i + 1).

Binnen de loop kun je i gebruiken, zodat elke ronde net iets anders doet:

for (let i = 1; i <= 5; i++) {
  console.log('5 × ' + i + ' = ' + (5 * i));
}

Verzamelen in een string

Wil je het resultaat op de pagina tonen in plaats van in de console, dan bouw je een verzamel-string op: begin leeg, en plak er elke ronde een regel bij. '\n' is een regeleinde.

let resultaat = '';
for (let i = 1; i <= 10; i++) {
  resultaat = resultaat + '5 × ' + i + ' = ' + (5 * i) + '\n';
}
document.getElementById('uitvoer').textContent = resultaat;

Pas ná de loop, als alle regels verzameld zijn, zet je de string in één keer op de pagina. De CSS-regel white-space: pre-line in de startcode zorgt dat de regeleindes zichtbaar blijven in de <p>.

De while-loop: zolang iets waar is

let teller = 0;
while (teller < 5) {
  console.log(teller);
  teller = teller + 1;
}

Een while draait zolang de voorwaarde true is. Jij bent zelf verantwoordelijk voor de stap: vergeet je teller = teller + 1, dan draait de loop eindeloos door.

Predict

Wat zie je in de console na deze code?

for (let i = 0; i < 3; i++) {
  console.log('Ronde ' + i);
}

Hoeveel regels, en met welke getallen?

Ronde 0
Ronde 1
Ronde 2

De loop begint bij i = 0 en herhaalt zolang i < 3: dus voor 0, 1 en 2. Bij i = 3 is 3 < 3 false en stopt de loop.

Probeer het zelf.

Editor laden...

Investigate

Experimenteer in het veld hierboven:

• Verander i <= 10 in i <= 5. Hoeveel regels krijg je?
• Vervang 5 * i door i * i. Welke rij getallen zie je nu?
• Zet een console.log(i) in de loop en klik. Hoe loopt de teller in de console?

Opdracht 1: Andere tafel

Pas de code aan zodat de knop de tafel van 7 toont, van 7 × 1 tot en met 7 × 12.

Editor laden...

Tip

Er staan drie vijven en één 10 in de functie. Welke moeten er veranderen — en vergeet de tekst op de knop niet.

Antwoord

function toonTafel() {
  let resultaat = '';
  for (let i = 1; i <= 12; i++) {
    resultaat = resultaat + '7 × ' + i + ' = ' + (7 * i) + '\n';
  }
  document.getElementById('uitvoer').textContent = resultaat;
}

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

In de HTML pas je de knoptekst aan naar "Toon tafel van 7".

Opdracht 2: Alleen even

Pas de tafel-loop aan zodat alleen de regels met een even waarde van i verschijnen (2, 4, 6, 8, 10).

Editor laden...

Tip

Twee routes: laat de stap met 2 tegelijk springen, of check binnen de loop met if en de modulo uit Waarden en operatoren (i % 2 === 0 betekent: even).

Antwoord

Route 1 — stap van 2:

for (let i = 2; i <= 10; i = i + 2) {
  resultaat = resultaat + '5 × ' + i + ' = ' + (5 * i) + '\n';
}

Route 2 — filter met if:

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    resultaat = resultaat + '5 × ' + i + ' = ' + (5 * i) + '\n';
  }
}

Opdracht 3: Aftellen

Bouw een aftelknop: bij een klik verschijnt op de pagina het aftellen van 10 naar 1, elk getal op een eigen regel, met als laatste regel "Lift-off."

Editor laden...

Tip

Een loop kan ook omlaag: begin bij i = 10, ga door zolang i >= 1, en verlaag met i--. Verzamel de regels in een string en plak "Lift-off." er ná de loop achteraan. Koppel je functie met addEventListener aan de knop.

Antwoord

function aftellen() {
  let resultaat = '';
  for (let i = 10; i >= 1; i--) {
    resultaat = resultaat + i + '\n';
  }
  resultaat = resultaat + 'Lift-off.';
  document.getElementById('uitvoer').textContent = resultaat;
}

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

Er gaat iets mis

Oneindige loop: de browser bevriest

let i = 0;
while (i < 5) {
  console.log(i);
  // Vergeten: i = i + 1
}

i verandert nooit, dus i < 5 blijft altijd true: de loop draait eindeloos en de pagina bevriest. Zorg dat de variabele binnen de loop richting de stopvoorwaarde beweegt.

Bij een for-loop gaat dit minder snel mis, omdat de stap (i++) al tussen de haakjes staat. Bij while moet je er zelf aan denken.