JavaScript-loops: for, forEach, while en do-while gebruiken

Met loops voer je in JavaScript dezelfde code meerdere keren achter elkaar uit. Ze komen van pas zodra je een array wilt doorlopen of een taak een bepaald aantal keren wilt herhalen. In dit hoofdstuk bekijken we de for-loop en de while-loop, de twee die je in JavaScript het vaakst gebruikt.

De for-loop in JavaScript

Met de for-loop in JavaScript voer je code een vast aantal keren uit. Zo ziet dat eruit:

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

De for-loop start met de variabele ‘i’ op 0. De voorwaarde ‘i < 5’ controleert of ‘i’ kleiner is dan 5. Klopt dat, dan draait de code tussen de accolades en wordt ‘i’ met 1 opgehoogd. De loop blijft doorgaan tot de voorwaarde ‘i < 5’ niet meer waar is.

Deze code zet de getallen 0 tot en met 4 in de console.

Je kunt de for-loop ook gebruiken om een array te doorlopen:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

De for-loop doorloopt de array ‘tableau’ en gebruikt de eigenschap ‘length’ om te bepalen hoeveel elementen er zijn. Bij elke iteratie komt de waarde van het huidige element in de console.

Met de instructie ‘break’ verlaat je een for-loop voortijdig:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

continue in een for-loop

Er bestaat ook de instructie ‘continue’, waarmee je naar de volgende iteratie springt zonder de rest van de huidige iteratie uit te voeren. Zo gebruik je de instructie ‘continue’ in een for-loop:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

In dit voorbeeld loopt de for-loop over de getallen 0 tot en met 9. De instructie ‘continue’ zit in de loop en controleert of de waarde van ‘i’ oneven is. Is dat zo, dan gaat ‘continue’ meteen naar de volgende iteratie, zonder de rest van de code uit te voeren.

Deze code zet de even getallen van 0 tot en met 8 in de console.

De forEach-loop in JavaScript

Met de forEach-loop in JavaScript doorloop je de elementen van een array of een object. Zo gebruik je de forEach-loop op een array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

De forEach-loop doorloopt de array ‘tableau’ en voert de meegegeven anonieme functie uit voor elk element. De waarde van het huidige element is binnen die functie beschikbaar via de variabele ‘element’.

Deze code zet elk element van de array in de console.

Op een object gebruik je forEach in combinatie met de methode ‘Object.entries()’:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

De methode ‘Object.entries()’ geeft een array van [sleutel, waarde]-paren terug, één per eigenschap van het object ‘objet’. De forEach-loop doorloopt die array en voert de meegegeven anonieme functie uit voor elk paar. De sleutel en de waarde zijn binnen die functie beschikbaar via de variabelen ‘clé’ en ‘valeur’.

Deze code zet elk paar in de vorm ‘sleutel: waarde’ in de console.

De while-loop in JavaScript

De while-loop in JavaScript voert code uit zolang de opgegeven voorwaarde waar is. Zo ziet dat eruit:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

De while-loop begint met de voorwaarde ‘a < 5’. Zolang die waar is, draait de code tussen de accolades en wordt ‘a’ met 1 opgehoogd. De loop blijft doorgaan tot de voorwaarde ‘a < 5’ niet meer waar is.

Deze code zet de getallen 0 tot en met 4 in de console.

Er is ook de do-while-loop, die eerst de code tussen de accolades uitvoert en de voorwaarde pas daarna controleert:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

Deze do-while-loop draait minstens één keer, omdat de voorwaarde pas na de eerste uitvoering wordt gecontroleerd. Ook deze code zet de getallen 0 tot en met 4 in de console.

Neem altijd een instructie op die de variabele uit de voorwaarde van de while-loop ophoogt of verlaagt, anders krijg je een oneindige loop. Vergeet je die, dan blijft de voorwaarde altijd waar en draait de loop eindeloos door.

Zorg er dus voor dat de variabele uit de voorwaarde bij elke iteratie verandert. Zo wordt de voorwaarde op een gegeven moment onwaar en stopt de loop.

Je kunt een loop ook beëindigen voordat de voorwaarde onwaar wordt, met de instructie ‘break’. Die breekt de uitvoering van de loop meteen af en springt naar de eerstvolgende instructie erna. Zo gebruik je de instructie ‘break’ in een while-loop:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

Deze while-loop start met de voorwaarde ‘true’, dus in principe draait hij eindeloos door. Alleen staat de instructie ‘break’ in de loop, en die wordt uitgevoerd zodra de waarde van ‘a’ 5 bereikt of passeert. Daarmee stopt de loop en gaat de uitvoering verder na de loop.

Deze code zet de getallen 0 tot en met 4 in de console.

Conclusie

We hebben de verschillende loops van JavaScript doorgenomen: de for-loop, de forEach-loop en de while-loop. Je hebt gezien hoe je met elk daarvan code herhaald uitvoert, en hoe je met stuurinstructies als ‘break’ en ‘continue’ het verloop van die loops bijstuurt.