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.

En résumé

La boucle `for...of` est une syntaxe moderne (ES6+) qui permet d'itérer simplement sur les éléments d'un tableau sans gérer d'index. Contrairement à la boucle `for` classique, chaque itération reçoit directement l'élément du tableau dans la variable de contrôle. À noter : `for...in` itère sur les propriétés d'objets, tandis que `for...of` itère sur les éléments de tableaux.

Points clés

• Syntaxe `for...of` introduite en ES6 pour itérer sur les éléments d'un tableau
• Pas besoin de gérer l'index contrairement à la boucle `for` classique
• À chaque itération, la variable reçoit directement l'élément du tableau
• Différent de `for...in` qui itère sur les propriétés d'un objet
• Code plus lisible et pratique : `for (let element of tableau)`
• Exemple d'utilisation : boucler sur un tableau de couleurs sans accès d'index

Questions fréquentes

Quelle est la différence entre `for...of` et la boucle `for` classique ?

`for...of` itère directement sur les éléments sans gérer l'index, tandis que `for` classique nécessite de maintenir un index et d'accéder à chaque élément manuellement via cet index.

Peut-on utiliser `for...of` pour itérer sur les propriétés d'un objet ?

Non, `for...of` s'utilise pour les tableaux. Pour itérer sur les propriétés d'un objet, on utilise `for...in` à la place.

Comment récupère-t-on l'élément actuel avec `for...of` ?

La variable de la boucle reçoit directement l'élément à chaque itération, sans besoin d'accéder par index. Par exemple, avec `for (let couleur of couleurs)`, la variable `couleur` contient chaque élément du tableau.