Een while loop is een ander soort iteratie. Het doet wel hetzelfde als een for i loop, namelijk itereren, maar het heeft een andere syntax en kan in sommige gevallen veel handiger/korter zijn dan een for i loop. Een while loop heeft de volgende syntax:
Een while loop kun je bijvoorbeeld gebruiken als je wil itereren van het getal 10 totdat het getal onder de 0 komt. De volgende code is dan mogelijk. Je zult wat overeenkomsten met de for i loop zien, zoals de operator voor het aftrekken.
var i = 10; while (i > 0) { alert('Ik zal dit blijven weergeven totdat i onder de nul komt!'); i--; }
Zoals je kunt zien is een while loop een stuk kleiner dan een for loop, maar het is tegelijkertijd een stuk gevaarlijker! Als je de operator voor het aftrekken vergeet, dan zul je een while loop maken dat door blijft gaan tot in de eeuwigheid in de theorie (browser crash in de praktijk).
Hieronder heb ik weer het voorbeeld van het weergeven van crewleden gebruikt als voorbeeld voor het gebruik van de while loop in combinatie met een Array. Ik wil nu enkel de even elementen in de Array weergeven. Dit betekent natuurlijk dat we gebruik kunnen maken van de restdelingsoperator. Aangezien een even getal een restdeling van 0 heeft, kunnen wij hier mooi op controleren. Ook heb ik hier wat meer crewleden toegevoegd aan de array.
var crewMembers = ['Joël', 'Gerard', 'Maarten', 'Thijs', 'Ibrahim', 'Marten', 'Pieter', 'Rens', 'Abbas', 'Ralph']; var crewIterator = 0; var totalCrewMembers = crewMembers.length; while (crewIterator > totalCrewMembers) { if ((crewIterator++ % 2) == 0) { alert('Naam: ' + crewMembers[(crewIterator - 1)]); } }
In de volgende subparagraaf zal ik bovenstaande code regel voor regel uitleggen.
var crewMembers = ['Joël', 'Gerard', 'Maarten', 'Thijs', 'Ibrahim', 'Marten', 'Pieter', 'Rens', 'Abbas', 'Ralph'];
Dit codefragment zorgt voor een Array met de crewleden. Elke crewlid heeft zijn eigen key-index om hem te kunnen opvragen.
var crewIterator = 0; var totalCrewMembers = crewMembers.length;
Dit codefragment zorgt voor een tweetal variabelen. Deze zijn nodig voor het goed funtioneren van de while loop. De crewIterator zorgt voor het bijhouden van de huidige key-index, terwijl totalCrewMembers bijhoud hoeveel crewleden in de array aanwezig zijn. totalCrewMembers.length geeft de lengte van de Array terug, tellend vanaf 1, terwijl de interne key-indexes van JavaScript beginnen te tellen vanaf 0. Hier moet je later mee rekening houden!
while (crewIterator < totalCrewMembers) {
De statement zegt in Algemeen Nederlands: blijf itereren zolang crewIterator kleiner is dan totalCrewMembers. Hierboven staat uitgelegd waarom het "kleiner-dan"-operator is gebruikt en niet het "kleiner-of-gelijk-aan"-operator.
if ((crewIterator++ % 2) == 0) {
Als de huidige waarde van crewIterator / 2 geen restdeling oplevert, dan is het een heel getal. Aangezien de ophogingsoperator achter de variabele staat, betekent dit dat de statement eerst uitgevoerd moet worden en meteen erna moet het de variabele met 1 verhogen. Als het er voor stond, zou eerst de variabele opgehoogd worden en pas dan zou de statement vergeleken worden.
alert('Naam: ' + crewMembers[(crewIterator - 1)]);
Alerten als bovenstaande statement true terugstuurt. Aangezien we in de statement de variabele hebben opgehoogd, moeten we hier de waarde niet nog eens verhogen, en niet verlagen. De juiste oplossing is 1 aftrekken van de waarde. Zo verandert de variabele niet, aangezien er geen toewijzing gebeurt en geen ophoging/aftrekking.