Les 4: Loops
Home ›JavaScript-track ›Les 4

🔄 Loops

⏱ Geschatte leestijd: 20 minuten · 7 stappen

Stel je voor dat je 100 getallen wilt loggen — zou je dan 100 keer console.log() schrijven? Met loops hoef je dat niet. Een loop herhaalt een stuk code zolang een bepaalde conditie geldt. Dit is een van de krachtigste tools in programmeren.

1 De for-loop

Drie onderdelen

Een for-loop bestaat uit drie delen tussen haakjes, gescheiden door puntkomma's: initialisatie (begin), conditie (doorgaan zolang), en stap (aanpassing na elke iteratie).

for-loop anatomie
//       initialisatie  conditie   stap
for (let i = 0;       i < 5;     i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Aftellen
for (let i = 5; i >= 1; i--) {
  console.log(i); // 5, 4, 3, 2, 1
}

// Stap van 2
for (let i = 0; i <= 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8, 10
}

De drie delen uitgelegd:

let i = 0Initialisatie: maak telvariabele i aan met beginwaarde 0
i < 5Conditie: ga door zolang i kleiner is dan 5
i++Stap: verhoog i met 1 na elke iteratie (i++ is hetzelfde als i = i + 1)

2 De while-loop

Wanneer gebruik je while?

Een while-loop gebruik je als je van tevoren niet weet hoe vaak de lus moet draaien. De lus gaat door zolang de conditie true is. Vergeet niet de variabele aan te passen — anders krijg je een oneindige lus!

while-loop
let geld = 100;

while (geld > 0) {
  console.log(`Nog €${geld} over.`);
  geld -= 30; // verlaag met 30 na elke stap
}
console.log("Op!");
// → "Nog €100 over."
// → "Nog €70 over."
// → "Nog €40 over."
// → "Nog €10 over."
// → "Op!"

⚠️ Oneindige lus! Als de conditie nooit false wordt, blijft de lus voor altijd draaien en bevriest de browser. Zorg altijd dat de conditie uiteindelijk false wordt.

3 break en continue

Fijnmazige controle over de lus

break stopt de lus direct en gaat verder na de lus. continue slaat de rest van de huidige iteratie over en springt naar de volgende.

break — stop de lus
for (let i = 1; i <= 10; i++) {
  if (i === 5) break; // stop bij 5
  console.log(i);
}
// → 1, 2, 3, 4
continue — sla over
for (let i = 1; i <= 6; i++) {
  if (i % 2 === 0) continue; // sla even over
  console.log(i);
}
// → 1, 3, 5

💡 Ezelsbruggetje: break = "breek de lus af". continue = "ga door naar de volgende iteratie".

4 De for...of-loop

Itereren over arrays

De for...of-loop is speciaal ontworpen voor het doorlopen van arrays (lijsten). Je hoeft geen teller bij te houden — je krijgt direct elk element. Arrays leer je uitgebreid in les 6; hier zie je alvast een voorproefje.

for...of met een array
const vakken = ["HTML", "CSS", "JavaScript", "PHP"];

// for...of: eenvoudig en leesbaar
for (const vak of vakken) {
  console.log(`Ik studeer: ${vak}`);
}
// → "Ik studeer: HTML"
// → "Ik studeer: CSS"
// → "Ik studeer: JavaScript"
// → "Ik studeer: PHP"

// Vergelijk met klassieke for-loop (meer code, minder leesbaar):
for (let i = 0; i < vakken.length; i++) {
  console.log(vakken[i]);
}

✓ Vuistregel: Als je over een array itereert, gebruik dan for...of. Als je de index nodig hebt of een specifiek aantal stappen telt, gebruik dan een gewone for-loop.

5 Oefening 1: Maaltafel van 7

Opdracht:

Gebruik een for-loop om de maaltafel van 7 te loggen: 7, 14, 21, 28 ... tot en met 70 (7 × 10).

✓ Een for-loop aanwezig

✓ Vermenigvuldiging met 7 (* 7) gebruikt

editor
Console output

6 Oefening 2: Kleinste gemene veelvoud

Opdracht:

Gebruik een while-loop om het eerste getal groter dan 1 te vinden dat deelbaar is door zowel 6 als 7. Log dat getal. (Het antwoord is 42.)

✓ Een while-loop aanwezig

✓ Modulo-operator % gebruikt

✓ Het getal 42 wordt gelogd

editor
Console output

7 Eindopdracht: Getallen met break en continue

Opdracht:

Gebruik een for-loop voor de getallen 1 tot en met 20, maar:

✓ Sla veelvouden van 4 over met continue (4, 8, 12, 16, 20 worden niet gelogd)

✓ Stop de lus zodra je het getal 17 bereikt met break (17 wordt ook niet gelogd)

✓ Gebruik een for-loop, break én continue

editor
Console output
📄 Volledig voorbeeld: loops.js 
// ── for-loop ──────────────────────────────────────
for (let i = 1; i <= 5; i++) {
  console.log(i); // 1 2 3 4 5
}

// ── while-loop ────────────────────────────────────
let n = 10;
while (n > 0) {
  console.log(n);
  n -= 3;
}

// ── break en continue ─────────────────────────────
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // sla even getallen over
  if (i === 9)     break;    // stop bij 9
  console.log(i);            // 1 3 5 7
}

// ── for...of ─────────────────────────────────────
const talen = ["HTML", "CSS", "JavaScript"];
for (const taal of talen) {
  console.log(`Ik ken ${taal}`);
}

// ── Maaltafel van 7 ───────────────────────────────
for (let i = 1; i <= 10; i++) {
  console.log(`7 × ${i} = ${7 * i}`);
}

// ── Kleinste gemene veelvoud van 6 en 7 ──────────
let getal = 2;
while (!(getal % 6 === 0 && getal % 7 === 0)) {
  getal++;
}
console.log(`KGV van 6 en 7: ${getal}`); // 42
← Les 3 Les 5 →