Loops

Wat ga je leren?

Je leert hoe je een stukje code meerdere keren laat draaien met een loop — zonder dezelfde regels handmatig te kopiëren. We behandelen for en while.

Theorie

Soms wil je dezelfde actie meerdere keren uitvoeren — bijvoorbeeld een tafel van 5 printen, of tien sterretjes op het scherm zetten. In plaats van tien keer dezelfde regel typen, gebruik je een loop.

for-loop — als je vooraf weet hoe vaak

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 5 keer.

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 een kortere vorm van i = i + 1).

Binnen de loop kun je i gebruiken — handig om iets te tonen dat verandert:

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

while-loop — zolang een voorwaarde waar is

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

Een while draait zolang de voorwaarde true is. Vergeet niet de variabele binnenin aan te passen — anders krijg je een oneindige loop die de browser laat vastlopen.

Predict

Wat zie je in de console na deze code?

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

Klik hier voor het antwoord

Ronde 0
Ronde 1
Ronde 2

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

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Verander i <= 10 naar i <= 5 — wat verandert er aan het aantal regels?
• Verander i++ naar i = i + 2 — wat zie je dan?
• Vervang 5 * door i * — welke uitkomst krijg je?
• Probeer i-- met let i = 10; i >= 1; i-- — wat doet de loop nu?

Modify

Opdracht: Pas de loop aan zodat alleen de even producten worden getoond (2, 4, 6...).

Tip

Optie 1: stap omhoog met i = i + 2 startend bij i = 2. Optie 2: gebruik een if-check binnen de loop op i % 2 === 0.

Antwoord

Optie 1 — stap omhoog met 2:

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

Optie 2 — filter met if:

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

Make

Opdracht: Bouw een aftel-functie die telt van 10 naar 1 in de console, en daarna "Lift-off!" toont. Gebruik een loop.

Tip

Begin op i = 10, blijf doorgaan zolang i >= 1, en verlaag met i-- of i = i - 1. Na de loop log je 'Lift-off!'.

Antwoord

function aftellen() {
  for (let i = 10; i >= 1; i--) {
    console.log(i);
  }
  console.log('Lift-off!');
}

Er gaat iets mis

Oneindige loop — browser bevriest

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

i wordt nooit verhoogd, dus i < 5 blijft altijd true. De loop draait voor altijd door en de browser bevriest. Zorg altijd dat de variabele binnenin de loop verandert richting de stop-voorwaarde.

Bij een for-loop gebeurt dit minder snel omdat de stap (i++) al in het haakjes-blok staat. Bij while moet je het bewust toevoegen.

---

← prompt & alert | Arrays →