Herhalen: For en While

Herhalingen of anders gezegd; lussen, zijn handig als je dezelfde code steeds opnieuw wilt uitvoeren, elke keer met een andere waarde.

Dit is vaak het geval bij het werken met arrays:

In plaats van:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Kun je ook schrijven:

var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}

Verschillende soorten lussen

JavaScript ondersteunt verschillende soorten loops:

De For-lus

De for lus heeft de volgende syntaxis:

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

Statement 1 wordt (één keer) uitgevoerd voordat het codeblok wordt uitgevoerd.

Statement 2 definieert de voorwaarde voor het uitvoeren van het codeblok.

Statement 3 wordt (elke keer) uitgevoerd nadat het codeblok is uitgevoerd.

Voorbeeld:

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Het bovenstaande voorbeeld kunt je als volgt lezen:

Opmerkingen:

Statement 1 hoeft niet te beginnen met 0, maar kan ook starten met 5. Vaak wordt i gebruikt als variabele maar andere namen mogen ook.

Bij statement 3 wordt iedere keer met 1 verhoogd, maar i=i+2 mag ook.

De For / In-lus

De JavaScript- for/in instructie doorloopt de eigenschappen van een object:

Voorbeeld:

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
  text += person[x];
}
Console.log(text);

Reslutaat:

John Doe 25
 

De For / Of-lus

De JavaScript- for/ofinstructie doorloopt de waarden van een itereerbaar object. for/of laat je datastructuren doorlopen, zoals Arrays, Strings, Maps, NodeLists en meer.

Voorbeeld:

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

Je kunt hiermee ook door iedere letter van een sting lopen:

Voorbeeld

var txt = "JavaScript";
var x;
for (x of txt) {
 document.write(x + "<br >");
}

De While-lus

De whilelus loopt door een codeblok een gespecificeerde standaard waar is.

In het volgende voorbeeld wordt de code in de lus keer op keer uitgevoerd, zolang een variabele (i) kleiner is dan 10:

Voorbeeld:
var i=0;
while (i < 10) {
  console.log("The number is " + i);
  i++;
}

De Do / While-lus

De do/whilelus is een variant van de while-lus. Deze lus zal het codeblok één keer uitvoeren, voordat wordt gecontroleerd of de voorwaarde waar is, daarna zal de lus worden zolang de voorwaarde waar is.

Voorbeeld:

In het onderstaande voorbeeld wordt een do/whilelus gebruikt. De lus wordt altijd één keer uitgevoerd, zelfs als de voorwaarde onwaar is, omdat het codeblok wordt voordat de voorwaarde wordt getest:

do {
  console.log("The number is " + i);
  i++;
}
while (i < 10);

Vergeet niet de variabele die in de conditie wordt gebruikt te verhogen, anders de lus nooit!

Het break-statement

De breakinstructie kan ook worden gebruikt om uit een lus te springen.  De breakinstructie breekt de lus en gaat door met het uitvoeren van de code na de lus (indien aanwezig):

Voorbeeld:

for (i = 0; i < 10; i++) {
 if (i === 3) { break; }
  console.log("The number is " + i);
}

Break werkt in alle lussen.

Het continue-statment

De continueinstructie verbreekt één iteratie van de lus, en gaat verder met de volgende iteratie in de lus.

Voorbeeld:

In dit voorbeeld wordt de waarde 3 overgeslagen:

for (i = 0; i < 10; i++) {
 if (i === 3) { continue; }
  console.log("The number is " + i);
}