Loops

Wat zijn loops?

Een loop laat je een stuk code meerdere keren uitvoeren. In plaats van dezelfde code tien keer te kopiëren, schrijf je hem één keer in een loop.

Zonder en met loop

// Zonder loop — veel herhaling:
console.log('Item 1');
console.log('Item 2');
console.log('Item 3');
console.log('Item 4');
console.log('Item 5');

// Met loop:
for (let i = 1; i <= 5; i++) {
  console.log(`Item ${i}`);
}

for loop

De klassieke for loop gebruik je als je precies weet hoe vaak je iets wilt herhalen, of als je de index nodig hebt.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Door een array loopen met index

const namen = ['Anna', 'Bob', 'Carol'];

for (let i = 0; i < namen.length; i++) {
  console.log(`${i}: ${namen[i]}`);
}
// 0: Anna
// 1: Bob
// 2: Carol

Aftellen

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

Met stap van 2

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

for...of

for...of is de moderne manier om door een array te lopen. Je krijgt direct de waarde, zonder index.

const producten = ['Laptop', 'Muis', 'Toetsenbord'];

for (const product of producten) {
  console.log(product);
}
// Laptop
// Muis
// Toetsenbord

For...of met objects in een array

const studenten = [
  { naam: 'Anna', cijfer: 8 },
  { naam: 'Bob', cijfer: 6 },
  { naam: 'Carol', cijfer: 9 }
];

for (const student of studenten) {
  console.log(`${student.naam}: ${student.cijfer}`);
}
// Anna: 8
// Bob: 6
// Carol: 9

For...of met strings

const woord = 'hallo';

for (const letter of woord) {
  console.log(letter); // h, a, l, l, o
}

for...in

for...in loop je door de properties (keys) van een object.

const auto = {
  merk: 'Fiat',
  model: '500',
  kleur: 'rood'
};

for (const key in auto) {
  console.log(`${key}: ${auto[key]}`);
}
// merk: Fiat
// model: 500
// kleur: rood

Dynamisch object inspecteren

const instellingen = {
  thema: 'donker',
  taal: 'nl',
  meldingen: true,
  fontSize: 16
};

for (const instelling in instellingen) {
  console.log(`${instelling} = ${instellingen[instelling]}`);
}

while loop

Een while loop herhaalt zolang een voorwaarde waar is. Je gebruikt hem als je vooraf niet weet hoe vaak je wilt herhalen.

let teller = 0;

while (teller < 5) {
  console.log(teller);
  teller++;
}
// 0, 1, 2, 3, 4

// GEVAARLIJK — oneindige loop!
let x = 0;
while (x < 5) {
  console.log(x);
  // x++ vergeten → loopt eindeloos!

Praktisch voorbeeld — wachten op invoer

let antwoord = '';

while (antwoord !== 'stop') {
  antwoord = prompt('Typ iets (of "stop" om te stoppen):');
  console.log(`Je typte: ${antwoord}`);
}

console.log('Gestopt!');

do...while loop

Een do...while loop voert de code minstens één keer uit, en controleert daarna de voorwaarde.

let teller = 0;

do {
  console.log(teller);
  teller++;
} while (teller < 3);
// 0, 1, 2

Verschil met while

let x = 10;

// while: controleert eerst — code wordt niet uitgevoerd
while (x < 5) {
  console.log('while:', x); // niets
}

// do...while: voert eerst uit, controleert daarna
do {
  console.log('do-while:', x); // "do-while: 10"
} while (x < 5);

forEach

forEach is een array-method die een functie uitvoert voor elk element. Het is een alternatief voor for...of.

const namen = ['Anna', 'Bob', 'Carol'];

namen.forEach(naam => {
  console.log(naam);
});
// Anna
// Bob
// Carol

Met index

const kleuren = ['rood', 'groen', 'blauw'];

kleuren.forEach((kleur, index) => {
  console.log(`${index}: ${kleur}`);
});
// 0: rood
// 1: groen
// 2: blauw

HTML genereren met forEach

const producten = ['Laptop', 'Muis', 'Toetsenbord'];
const lijst = document.querySelector('#productenlijst');
let html = '';

producten.forEach(product => {
  html += `
${product}
`;
});

lijst.innerHTML = html;

break & continue

Met break stop je een loop vroegtijdig. Met continue sla je de huidige iteratie over en ga je verder met de volgende.

break

const getallen = [1, 3, 5, 7, 4, 9, 2];

for (const getal of getallen) {
  if (getal % 2 === 0) {
    console.log(`Eerste even getal: ${getal}`);
    break; // stop zodra we het eerste even getal vinden
  }
}
// "Eerste even getal: 4"

continue

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue; // sla veelvouden van 3 over
  }
  console.log(i);
}
// 1, 2, 4, 5, 7, 8, 10

Praktisch voorbeeld

const gebruikers = [
  { naam: 'Anna', actief: true },
  { naam: 'Bob', actief: false },
  { naam: 'Carol', actief: true },
  { naam: 'David', actief: false },
];

for (const gebruiker of gebruikers) {
  if (!gebruiker.actief) continue; // sla inactieve gebruikers over
  console.log(`Actief: ${gebruiker.naam}`);
}
// Actief: Anna
// Actief: Carol

Welke loop wanneer?