Hoofdstuk 4: Loops

Het grote verschil tussen Python en JavaScript (en C en Java) is de manier waarop code wordt gegroepeerd. In Python gebruik je een inspring-niveau om aan te geven welke code bij elkaar hoort. En hoewel inspringen zeker een goed idee is, kiezen andere talen ervoor om { .. }-haakjes te gebruiken. Dat haakje noemen we ‘curly brace’ (ok er is een taal die het ‘snor’ noemt, die taal heet zelf mustache). Dit betekent dat ondanks inspring-verschillen de code toch bij elkaar zal horen in C, JavaScript, Java … . Dit zorgt naar mijn idee voor minder fouten maar is meer tekens op het scherm.

Loops (lussen?)

Als je in een computerprogramma iets wil herhalen, of iets wil doen voor elk ding in een lijst, dan gebruik je daarvoor loops. Javascript heeft diverse soorten loops (want JavaScript is bijzonder).

While-loop

Dit is de meest eenvoudige loop. De code in het blok tussen {} wordt herhaald zolang de voorwaarde geldt.

const lekker = 21;
let temperatuur = 0;
let aircoAan = false;

// ! betekent 'niet', dus !klaar is niet-klaar
while (temperatuur > lekker) {
    if (!aircoAan) { zetAircoAan(); }
    wachtEenMinuut();
    temperatuur = meetTemperatuur();
}
zetAircoUit();

For-loop met teller

Dit is de klassieke for-loop die bijna elke programmeertaal heeft:

for(let i = 0; i < 10; i++) {
    console.log("i = " + 1);
}

output:
0
1
...
9

Die loop heeft de volgende constructie:

for ( initialisatie ; voorwaarde ; verandering ) {

}

• De initialisatie wordt eenmalig uitgevoerd (bvb let i = 0),

• de voorwaarde wordt voor het uitvoeren van de lus gecheckt, als die false teruggeeft is de loop klaar (bvb i < 10),

• de verandering wordt na het uitvoeren van de lus-code uitgevoerd. (bvb i = i + 1).

For-loop voor arrays

We hebben eerder gesproken over arrays, die je met [] noteert in JavaScript. Om alle elementen van een array af te lopen en een voor een iets mee te kunnen doen, heeft JavaScript een speciale syntax:

let fruit = [ 'appel', 'banaan', 'citroen' ];

for (let f of fruit) {
    if (f === 'banaan') {
        console.log("Pieter van Engelen steekt ineens zijn hoofd om de hoek!");
    } else {
        console.log("Fruit: " + f);
    }
}

Deze for-loop werkt met of … en dat is even verwarrend want in Python is dat in, maar in JavaScript kan dat ook maar dan betekent het iets anders:

For-loop voor objecten

In nog nieuwere versies (voor ruimhartige definitie van nieuw) bestaat deze mooie variant:

let favFruit = {
    Pieter: "banaan",
    Merijn: "paprika, want dat is technisch gezien een vrucht en dus fruit?"
}

for (const naam in favFruit )  {
    // Je kunt in JavaScript uit een object een waarde halen bij een key met de syntax die lijkt op arrays:
    const fruit = favFruit[naam];
    console.log(`Het favoriete fruit van ${naam} is ${fruit}`);
}