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.