Loops: for..of and for..in

We hebben zojuist the basis loops in Javascript behandeld, de zogenaamde for and while loop. Met name the for loop kan je voor veel verschillende doeleinden gebruiken. In recente versies van JavaScript, zijn nog eens twee nieuwe for loops toegevoegd: De for..of loop en de for..in loop.

The for..of loop

Je kan de for..of loop gebruiken om over elk type iterable object te itereren. Hoewel dit specifieke onderwerp vrij vergevorderd is, wilde ik je al laten kennismaken met de for..of loop - iterable objects zullen we later behandelen.

Voor nu is het belangrijk om te weten dat er verschillende ingebouwde objecten zijn die de benodigde functionaliteit implementeren om te kunnen werken als een iterable object. HetArray object is de meest bekende, maar het String object implementeert deze functionaliteit ook. We hebben arrays, objecten en strings nog niet in detail behandeld, dus ik zal de voorbeelden simpel en illustratief houden- je kan altijd terug naar dit artikel om jezelf op te helderen hoe deze speciale for-loops werken.

Om te beginnen, om het verschil tussen een normale for loop en gespecialiseerde for..of loop te illustreren, dit is hoe we in het voorafgaande over een Array loopten:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let i = 0; i < fruits.length; i++)
	alert(fruits[i]);

Dankzij de length property van de Array, weten we tot hoever we kunnen gaan als we toegang willen hebben tot elk item in de array. Dit werkt prima, and tot dus ver zou dit de manier zijn geweest hoe je over een array loopt.

Maar dankzij de for..of loop, kunnen we het gehele process eenvoudiger maken. Kijk eens bijvoorbeeld naar onderstaand voorbeeld wat het exact hetzelfde doet als hiervoor maar met een veel simpelere syntax.

let fruits = ["Apple", "Pineapple", "Banana"];

for(let fruit of fruits)
	alert(fruit);

De manier waarop het werkt is vrij simpel: Een variabele wordt aangemaakt genaamd fruit (je kan het elke naam geven die je wilt, natuurlijk), en gedurende elke iteratie wordt deze variabele geupdate met het volgende item in de array. Simpel en effectief!

En daarbij omdat het String object ook een iterable object is, kunnen we er ook op deze manier overheen loopen.

let text = "Hello!";
for(let c of text)
	console.log(c);
// Expected output:
/*
"H"
"e"
"l"
"l"
"o"
"!"
*/

The for..in loop

De for..of loop gebruik je voor collections (zoals arrays) maar voor objecten heb je de for..in loop. Aangezien objecten in JavaScript in de basis een collection van keys and values zijn, kunnen we over de properties van een object loopen, wat erg handig kan zijn. Nogmaals: We zullen objecten later in meer detail later in deze tutorial behandelen, maar voor nu bekijk onderstaand voorbeeld dat illustreert hoe een for..in loop werkt:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop);
}

// Expected output:
// "name"
// "age"

Zoals je kan zien, werkt het nagezien genoeg hetzelfde als een for..of loop, maar in dit geval heb je toegang tot de property naam in elke iteratie. Als we willen kunnen we natuurlijk ook deze naam gebruiken om de echte value van de property te krijgen, zoals hier:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop + " = " + obj[prop]);
}

// Expected output:
// "name = John Doe"
// "age = 42"

Zoals je kan zien is dit zowel makkelijk als krachtig in gebruik. Zodra je aan de slag gaat met objecten, zal je de for..in loop snel erg waarderen.

Loop control: break and continue

In het vorige artikel hadden we de break en continue keywords gebruikt in combinatie met de for and while loops, maar ze werken op precies dezelfde manier in for..of en in for..in loops. De continue keyword zorgt ervoor dat de loop direct naar de volgende iteratie gaat, terwijl de break keyword de loop meteen stopt. Hier is een voorbeeld:

let text = "Hello!";
for(let c of text)
{
	if(c == "l")
		continue;
	if(c == "!")
		continue;
	alert(c);
}
// Expected output:
// "H"
// "e"
// "o"

In dit voorbeeld gebruiken we zowel break als continue. We loopen over de string "Hello!" and zodra we een "l" tegenkomen, gebruiken we continue (de huidige iteratie overslaan en door naar de volgende), en zodra we een "!" tegenkomen, gebruiken we break (de huidige iteratie overslaan en de loop stoppen). Als de code geen break of continue tegenkomt, wordt het huidige character getoond, waardoor de letters "H", "e" en "o" naar de output worden gezonden.

Summary

De for..of en for..in loops zijn een goede recente toegoeving aan de JavaScript language welke het gemakkelijker maakt om te loopen, met name over array en objecten. Ze bieden geen direct voordeel boven de oude, goede vertrouwde for en while loops, behalve het feit dat ze sneller te typen zijn en je coden minder complex oogend maken.

Zoals eerder benoemd, worden arrays en objecten niet in deze tutorial behandeld, maar je zal meer over deze dingen leren in latere hoofstukken. Houdt dus deze twee gespecialiseerde loops in gedachten als je begint te werken met deze data types.