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.
En résumé
La boucle for...in permet de parcourir les propriétés d'un objet ou les indices d'un tableau en JavaScript. Contrairement à la boucle for classique (avec initialisation, condition, incrémentation), la boucle for...in utilise une syntaxe simple : `for (let clé in objet)`. À chaque itération, la variable clé contient le nom de la propriété (pour un objet) ou l'index (pour un tableau), accessible via la notation entre crochets ou la notation par points.
Points clés
- La boucle for...in itère sur les propriétés d'un objet ou les indices d'un tableau sans nécessiter les trois composants (initialisation, condition, incrémentation) de la boucle for classique
- Utilisez la notation entre crochets `objet[clé]` pour accéder aux valeurs de propriétés dont le nom est calculé à l'exécution
- La notation par points `objet.propriété` ne fonctionne que pour les propriétés connues à l'avance ; elle échoue si le nom de la propriété est stocké dans une variable
- Avec les tableaux, for...in retourne les indices (0, 1, 2...) plutôt que les éléments directement ; utilisez `tableau[index]` pour accéder à la valeur
- JavaScript offre une alternative moderne avec la boucle for...of, qui est plus appropriée pour parcourir les éléments des tableaux directement
Questions fréquentes
Quelle est la différence entre la notation par points et la notation entre crochets pour accéder aux propriétés d'un objet?
La notation par points (ex. `objet.propriété`) fonctionne uniquement pour les propriétés dont le nom est fixe et connu au moment du code. La notation entre crochets (ex. `objet["propriété"]` ou `objet[clé]`) permet d'accéder à une propriété dont le nom peut être calculé ou stocké dans une variable à l'exécution.
Peut-on utiliser for...in pour parcourir un tableau?
Oui, on peut utiliser for...in avec un tableau, mais ce n'est pas la méthode idéale. La boucle for...in parcourt les indices du tableau (0, 1, 2...) et non les éléments directement. Pour accéder aux valeurs, il faut utiliser la notation entre crochets : `tableau[index]`. Pour une meilleure expérience avec les tableaux, JavaScript ES6 propose la boucle for...of.
Pourquoi la boucle for...in est-elle particulièrement utile pour les objets?
La boucle for...in est idéale pour les objets car elle permet de parcourir automatiquement toutes les propriétés sans connaître leurs noms à l'avance. À chaque itération, la variable de boucle contient le nom d'une propriété différente, ce qui facilite l'affichage ou le traitement de tous les attributs de l'objet.