Fout bij het doorlopen van een array met for-in lus in JavaScript

Om een array door te lopen moet je de for-of lus gebruiken. Soms proberen beginners echter foutief de for-in lus toe te passen. Laten we kijken naar de kenmerkende tekenen van deze fout.

Stel we hebben de volgende array:

let arr = ['a', 'b', 'c'];

Laten we de elementen van deze array doorlopen en ze in één string zetten.

Een programmeur heeft deze taak al opgelost, maar heeft per ongeluk de for-in lus gebruikt. Laten we kijken wat hij heeft gekregen:

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // geeft '012' weer

Dus, het resultaat is de string '012', en niet 'abc'. Laten we uitzoeken waarom dit gebeurd is.

Waarom werd de array überhaupt doorlopen met de for-in lus? Het zit zo dat een array in JavaScript een speciaal geval van een object is. Daarom is dit in principe correcte code. Maar je zou het niet moeten doen.

Het probleem is dat for-in onder bepaalde voorwaarden extra zaken kan meenemen, en je naast de array-elementen ook nog iets parasitisch kunt krijgen tijdens het doorlopen. Doorloop arrays alleen met for-of.

Laten we nu uitzoeken waarom we zo'n vreemd resultaat zien. Het zit zo, dat bij het doorlopen met for-in in de variabele elem eigenlijk de sleutels terechtkomen, ondanks de misleidende naam van deze variabele.

Laten we de gemaakte fout herstellen en de correcte code schrijven:

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // geeft 'abc' weer