Erreur de parcours de tableau avec la boucle for-in en JavaScript

Pour parcourir un tableau, il faut utiliser la boucle for-of. Parfois, cependant, les débutants essaient par erreur d'appliquer la boucle for-in. Regardons les signes caractéristiques de cette erreur.

Supposons que nous ayons un tableau :

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

Parcourons les éléments de ce tableau et inscrivons-les dans une seule chaîne.

Un certain programmeur a déjà résolu cette tâche, mais a utilisé par erreur la boucle for-in. Voyons ce qu'il a obtenu :

let res = '';

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

console.log(res); // affichera '012'

Ainsi, le résultat est la chaîne '012', et non 'abc'. Voyons pourquoi cela s'est produit.

Pourquoi le tableau a-t-il été parcouru avec la boucle for-in ? Le fait est que un tableau en JavaScript est un cas particulier d'objet. Donc, en réalité, sous cet aspect, c'est un code correct. Mais il ne faut pas faire ainsi.

Le problème est que for-in dans certaines conditions peut attraper des éléments supplémentaires, et en plus des éléments du tableau, vous pourriez obtenir autre chose de parasite lors du parcours. Parcourez les tableaux uniquement avec for-of.

Voyons maintenant pourquoi nous voyons un résultat aussi étrange. Le fait est que lors du parcours avec for-in, dans la variable elem, ce sont en réalité les clés qui vont être stockées, malgré le nom trompeur de cette variable.

Corrigeons l'erreur commise et écrivons le code correct :

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

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

console.log(res); // affichera 'abc'