Loops: for and while

We hebben net geleerd over if-statements, een integraal onderdeel van een programmeertaal. Bijna net zo belangrijk zijn lussen: De mogelijkheid om hetzelfde blok code meerdere keren te herhalen, met de mogelijkheid om het aantal herhalingen direct te controleren.

In JavaScript zijn er momenteel twee soorten lusstructuren: De "for"-lus en de "while"-lus. Ze zijn er allebei in verschillende variaties en in dit artikel gaan we dieper in op hoe ze werken en hoe je ze kunt gebruiken.

De while lus

De simpelste soort lus om mee te beginnen is de while-lus. Deze heeft een zeer eenvoudige syntaxis:

while(somethingIsTrue) 
{
	DoStuff();
}

Dus zolang de voorwaarde tussen haakjes waar is, wordt het volgende blok code steeds herhaald. Dit vereist dat je iets doet binnen het herhaalde blok waardoor de interpreter de lus kan verlaten - anders heb je een zogenaamde oneindige lus gemaakt, waardoor je code nooit zal eindigen!

Een realistisch voorbeeld van een while-lus zou er als volgt uit kunnen zien:

let counter = 1;
while(counter <= 10)
{
	document.write(counter);
	counter = counter + 1;
}

De lus loopt zolang de variabele "teller" niet groter is dan 10, en bij elke herhaling geven we het getal weer EN verhogen we de variabele "teller". Vooral dat laatste is belangrijk, want zonder dat zou "teller" nooit groter zijn dan 10 en zou de lus eindeloos doorlopen. Zoals je later zult zien, is een "for"-lus eigenlijk beter geschikt voor een taak als deze, maar ik had een eenvoudig, rechttoe rechtaan voorbeeld nodig om te illustreren hoe een while-lus werkt.

De do..while variant

Bij een gewone while-lus, zoals in het bovenstaande voorbeeld, wordt de voorwaarde geëvalueerd voordat we de lus binnengaan. Dit betekent dat we de lus misschien nooit binnengaan - als de voorwaarde nooit waar is, wordt het volgende blok code nooit uitgevoerd. Als je dit zelf wilt proberen, verander dan de beginwaarde van de variabele "counter" in het bovenstaande voorbeeld in 11 en voer het opnieuw uit!

De do..while-variant van de while-lus draait de dingen om - in plaats van de voorwaarde te evalueren voordat de code wordt uitgevoerd, wordt de evaluatie uitgevoerd NADAT de code van de lus is uitgevoerd. Dit zorgt voor ten minste één herhaling, wat nuttig kan zijn in sommige scenario's. Hier is een voorbeeld - merk op hoe het while-gedeelte is verplaatst, wat duidelijk de volgorde aangeeft waarin dingen worden gedaan:

let counter = 11;
do
{
	document.write(counter);
	counter = counter + 1;
} while(counter <= 10);

In dit voorbeeld veranderde ik de while-lus in een do..while-lus en vervolgens veranderde ik de beginwaarde van de counter-variabele in 11. Als dit een gewone while-lus was geweest, zou de code erin nooit zijn uitgevoerd , maar omdat het een do..while-lus is, wordt de voorwaarde, waarvan we hebben verzekerd dat deze zal evalueren naar false, geëvalueerd NA de eerste iteratie, waardoor ten minste één uitvoering is verzekerd.

De for-lus

Een geweldig alternatief voor de while-lus is de for-lus. Hij ziet er wat ingewikkelder uit, maar dat komt omdat deze flexibeler is en daarom ook vaker wordt gebruikt. De for-lus werkt door een teller te declareren, dan een voorwaarde voor deze teller en dan een stap voor de teller (verhogen of verlagen) bij elke herhaling, allemaal gespecificeerd in één regel - daarom ziet het er ingewikkeld uit. Laat me dit illustreren met een voorbeeld:

for(let counter = 1; counter <= 10; counter = counter + 1)
	document.write(counter);

Hier doen we ongeveer hetzelfde als in de eerste while-lus: We tellen van 1 tot 10. Maar zoals je kunt zien, is er minder code voor nodig, omdat het tellermechanisme in feite is ingebouwd in de for-lus. Op de eerste regel geven we de interpreter de opdracht om het volgende te doen, met elke instructie gescheiden door een puntkomma:

• We declareren een variabele met de naam counter en wijzen er de waarde 1 aan toe
• We geven aan dat deze lus moet lopen zolang de counter variabele kleiner-dan-of-gelijk is aan 10
• We specificeren dat bij elke herhaling de counter variabele met één moet worden verhoogd

In dit voorbeeld ben ik opzettelijk langdradig, door een lange naam te gebruiken voor de variabele en de increment operator niet te gebruiken (daarover later meer). Een realistischer voorbeeld zou er zo uitzien:

for(let i = 1; i <= 10; i++)
	document.write(i);

Best cool hoeveel we kunnen bereiken met zo weinig code, toch?

Merk op dat dit voorbeeld van een for-lus erg lijkt op onze while-lus van eerder. Dit komt ook omdat de for-lus niet in de exacte volgorde wordt uitgevoerd zoals de code zou kunnen impliceren. Je zou verwachten dat alle drie de delen van de eerste regel eerst worden uitgevoerd, en dan de eigenlijke code van de lus, maar dat is niet het geval. In plaats daarvan wordt de for-lus als volgt afgehandeld:

1. De variabele wordt gedeclareerd
2. De voorwaarde wordt gecontroleerd, wat betekent dat als de voorwaarde bij de eerste poging faalt, er nooit herhalingen worden uitgevoerd.
3. Als aan de voorwaarde voldaan wordt , wordt de luscode (in dit geval onze document.write()) uitgevoerd
4. De stap (i++), laatste deel van de lus, wordt uitgevoerd

Dit kan in het begin een beetje verwarrend lijken, maar maak je geen zorgen, je went er wel aan!

For loop variaties

Als laatste opmerking, specifiek over de for-lus, wil ik je laten zien dat deze nog meer aanpasbaar is dan je zou verwachten: Je kunt delen weglaten (alle delen, in feite, maar dat zou resulteren in een eindeloze lus), en je hebt volledige controle over het stap-deel, wat betekent dat je het kunt verhogen of verlagen met 1 of een ander positief getal bij elke herhaling. Hier is een voorbeeld:

let counter = 2;
	
for(; counter <= 10;)
{
	document.write(counter);
	counter = counter + 2;
}

Ik weet dat het er misschien vreemd uitziet, maar laat me je er doorheen leiden:

• Er wordt geen variabele gedeclareerd in de for-lus - dat doen we vóór de lus. De for-lus heeft echter 3 delen nodig, dus we plaatsen gewoon een puntkomma om aan te geven dat we geen lusvariabele hoeven aan te geven
• De voorwaarde is hetzelfde als voorheen
• Maar we laten ook het stap-gedeelte weg
• In plaats daarvan werken we rechtstreeks met de counter-variabele binnen de lus en verhogen deze met 2 in plaats van 1, bij elke herhaling

Het resultaat is een lijst met even getallen van 2 tot 10. Nu, dit is vooral om je de flexibiliteit van de for-lus te laten zien - je zult het waarschijnlijk niet veel gebruiken, vergeleken met de meer gebruikelijke versie die ik je eerst liet zien.

De lus controleren: onderbreken (break) en doorgaan (continue)

Soms kom je in een situatie terecht waarin je meer controle moet nemen over de lus terwijl je er al in zit. JavaScript heeft twee sleutelwoorden die (bijna) alleen worden gebruikt voor lussen: break en continue. Laten we eens kijken wat ze voor je kunnen doen.

continue (ga verder)

Het continue sleutelwoord kan binnen een lus gebruikt worden om de interpreter te instrueren de rest van de code binnen de lus over te slaan en naar de volgende herhaling te gaan. Dit is meestal het resultaat van een soort interne controle binnen de lus. Hier is een eenvoudig voorbeeld dat laat zien hoe het werkt:

for(let counter = 1; counter <= 10; counter++)
{
	if(counter % 2 != 0)
		continue;
	document.write(counter);	
}

We tellen in feite van 1 tot 10, maar binnen de lus controleren we of de teller een gelijk getal is (met behulp van de % (rest)-operator - daarover later meer) en als dat niet zo is, springen we naar de volgende herhaling met het continue sleutelwoord. Dit stelt ons in staat om alleen gelijke getallen af te drukken, en hoewel dit voorbeeld op zichzelf niet erg nuttig is, zul je snel in een situatie terechtkomen waarin de mogelijkheid om terug te springen naar het begin van de lus en door te gaan naar de volgende herhaling nuttig kan zijn . Maar wat als je de lus volledig wilt afsluiten?

break (onderbreking)

Om een lus voortijdig volledig te verlaten, hebben we het break sleutelwoord. Hiermee wordt de lus onmiddellijk verlaten en gaan we verder met de volgende regels na de lus. Hier is een voorbeeld:

for(let counter = 1; counter <= 10; counter++)
{
	document.write(counter);
	if(counter >= 5)
		break;
}
document.write("Five is enough...");

Opnieuw tellen we van 1 tot 10, maar binnen de lus besluiten we plotseling dat we alleen tot 5 willen tellen, dus zodra we dat getal bereiken, verlaten we de lus en gaan we verder.

En natuurlijk kunnen zowel continue als break ook worden gebruikt in een while-lus, zelfs in combinatie - hier is een voorbeeld om dit te bewijzen:

let counter = 0;
while(counter <= 20)
{
	counter = counter + 1;
	
	if(counter % 2 != 0)
		continue;
	document.write(counter);
	if(counter >= 10)
		break;
	
}
document.write("Ten is enough...");

Korte samenvatting: we tellen van 0 tot 20, maar als de teller niet gelijk is, gaan we naar de volgende herhaling en zodra de teller op 10 staat, verlaten we de lus. Dit alles om u een combinatie van de sleutelwoorden continue en break te laten zien binnen een while. lus.

Samenvatting

Met lussen kun je dezelfde code meerdere keren herhalen, maar met verschillende resultaten, zoals we in de voorbeelden van dit artikel hebben gezien. Of je de while of de for lus gebruikt, hangt echt af van de situatie waarin je je bevindt, maar in veel gevallen zijn beide bruikbaar en of je de ene of de andere gebruikt, komt soms neer op persoonlijke smaak.