4.8 Boucle for...of

Depuis ECMAScript 6 (ES6), JavaScript propose une nouvelle manière d'itérer sur un tableau avec la boucle for...of. Elle est très proche de for...in sur le plan syntaxique : la seule différence est le mot-clé. On utilise of à la place de in.

Syntaxe et exemple

Reprenons un tableau couleurs = ['rouge', 'vert', 'bleu']. Avec for (let couleur of couleurs), la variable de boucle couleur reçoit directement chaque élément du tableau à chaque itération, et non plus son index. Plus besoin de manipuler un index, plus besoin d'écrire tableau[index] : on accède immédiatement à la valeur.

const couleurs = ['rouge', 'vert', 'bleu'];

for (let couleur of couleurs)
  console.log(couleur);
// Affiche : rouge, vert, bleu

Récapitulatif for...in vs for...of

• for...in : parcourt les propriétés d'un objet (clés)
• for...of : parcourt les éléments d'un tableau (valeurs)

C'est cette distinction qu'il faut retenir. Pour les tableaux, préférez for...of : la syntaxe est plus claire, et on s'épargne la gestion manuelle d'index. On se retrouve pour la prochaine vidéo.