4.7 Boucle For...in

Jusqu'ici, vous avez vu trois types de boucles en JavaScript : for, while et do...while. Toutes répètent une action un certain nombre de fois. JavaScript propose deux types supplémentaires destinés au parcours de structures de données : la boucle for...in pour les propriétés d'un objet, et la boucle for...of pour les éléments d'un tableau. Voyons d'abord for...in.

Parcourir les propriétés d'un objet

Imaginons un objet person avec deux propriétés : name: "Toto" et age: 20. Contrairement à la boucle for classique, la boucle for...in n'a pas trois parties. La syntaxe est for (let key in person). À chaque itération, la variable key contient le nom d'une propriété de l'objet : d'abord "name", puis "age". Pour afficher aussi la valeur, on accède à la propriété via la notation crochets person[key] — la notation point person.key ne marcherait pas car il n'existe pas de propriété littéralement nommée "key".

const person = { name: 'Toto', age: 20 };

for (let key in person)
  console.log(key, person[key]);

Utilisation sur un tableau (déconseillée)

On peut aussi utiliser for...in sur un tableau. Avec un tableau couleurs = ['rouge', 'vert', 'bleu'], l'itération expose les index 0, 1, 2 dans la variable de boucle, et on accède aux éléments par couleurs[index]. Ce n'est cependant pas la façon idéale de parcourir un tableau. Depuis ECMAScript 6 (ES6), JavaScript propose la boucle for...of, plus directe et plus lisible pour les tableaux. C'est l'objet de la prochaine vidéo.