6.9 Itérer un tableau

Plus tôt dans le cours, vous avez découvert plusieurs boucles en JavaScript. Quand il s'agit d'itérer un tableau, deux approches dominent en pratique : for...of et forEach.

La boucle for...of

Très lisible, elle assigne automatiquement chaque élément du tableau à une variable de boucle.

const numbers = [1, 2, 3];
							for (let number of numbers) {
							  console.log(number);
							}

La méthode forEach

Tous les tableaux disposent d'une méthode forEach qui exécute une fonction callback pour chaque élément. C'est un style plus fonctionnel.

numbers.forEach(function(number) {
							  console.log(number);
							});

En combinant avec une arrow function, on obtient une forme très compacte :

numbers.forEach(number => console.log(number));

Récupérer l'index avec forEach

Le callback de forEach accepte un second paramètre optionnel : l'index de l'élément courant. C'est l'un des avantages de forEach par rapport à for...of : on récupère facilement l'index sans avoir à le gérer manuellement.

numbers.forEach((number, index) => {
							  console.log(index, number);
							});

Avec for...of, on n'obtient pas l'index directement. Si vous en avez besoin, deux options : utiliser Object.entries ou la méthode entries du tableau, ou bien revenir à un for classique. Mais dans 80% des cas, forEach est le bon choix.

Entre les deux styles, c'est une question de préférence. for...of est légèrement plus performant et permet d'utiliser break/continue ; forEach est plus expressif et s'intègre bien avec d'autres méthodes fonctionnelles comme map ou filter.

En résumé

Cette leçon couvre les différentes méthodes pour itérer un tableau en JavaScript. On explore la boucle `for...of` qui assigne chaque élément à une variable à chaque itération, puis la méthode `forEach()` qui exécute une fonction callback pour chaque élément. La leçon montre également comment utiliser les fonctions fléchées pour simplifier la syntaxe et comment accéder à l'index de chaque élément.

Points clés

• La boucle for...of permet d'itérer directement les éléments d'un tableau dans chaque itération
• La méthode forEach() prend une fonction callback qui est exécutée pour chaque élément du tableau
• Les fonctions fléchées offrent une syntaxe plus concise, notamment quand il y a un seul paramètre (pas besoin de parenthèses)
• Le callback de forEach() peut recevoir deux paramètres : l'élément et son index
• La boucle for...of ne fournit pas l'index directement, contrairement à forEach()

Questions fréquentes

Quelle est la différence entre for...of et forEach() ?

La boucle for...of assigne chaque élément à une variable, tandis que forEach() exécute une fonction callback pour chaque élément. forEach() peut accéder à l'index, contrairement à for...of qui ne le fournit pas directement.

Comment utiliser une fonction fléchée avec forEach() ?

Si vous avez un seul paramètre, vous pouvez écrire arr.forEach(element => console.log(element)) sans parenthèses autour du paramètre. Cela remplace la syntaxe plus longue avec function(element) { ... }.

Comment accéder à l'index d'un élément lors d'une itération ?

Avec forEach(), vous pouvez passer un deuxième paramètre pour l'index : arr.forEach((element, index) => console.log(index, element)). La boucle for...of seule ne fournit pas l'index.