J'ai récemment rencontré une question d'entretien qui demandait différentes façons de parcourir un objet JavaScript Array. L'invite semblait initialement simple, car je devais fournir quelques exemples d'extraits de code. Cependant, cette question m'a intrigué, j'ai donc décidé d'approfondir chaque méthode, en explorant non seulement comment les utiliser, mais aussi quand et pourquoi vous pourriez choisir une approche plutôt qu'une autre.

Dans cet article, je vais vous présenter différentes méthodes d'itération sur des tableaux en JavaScript, en soulignant leurs différences, leurs avantages et leurs cas d'utilisation.

pour la boucle
Avantages :

• Flexibilité : la boucle for offre de la flexibilité en permettant l'utilisation de break pour quitter la boucle ou continuer à passer à l'itération suivante. Vous pouvez également spécifier directement les indices, vous donnant un contrôle précis sur le comportement de la boucle.
• Ordre non séquentiel : vous contrôlez l'ordre d'itération en ajustant les conditions de la boucle, comme itérer en arrière ou ignorer certains éléments.

Avant l'introduction de la boucle for...of, la boucle for traditionnelle était la méthode standard pour l'itération des tableaux. Cependant, il peut être sujet à des erreurs, telles que démarrer l'index à 1 au lieu de 0 ou utiliser par erreur arr.length au lieu de arr.length - 1. Comme le suggère MDN, "il est généralement préférable d'utiliser pour... de si vous le pouvez."

Quand utiliser :
Lorsque vous avez besoin d'un contrôle total sur l'itération, comme sauter des itérations ou itérer à l'envers.
Lorsque vous avez besoin à la fois de l'index et de la valeur lors de l'itération.

pour...de
Avantages :

• Simplicité et recommandation : La boucle for...of est un moyen simple et recommandé de parcourir un tableau, car elle gère automatiquement les index pour vous. Vous pouvez toujours utiliser break pour quitter la boucle ou continuer à passer à l'itération suivante, en fonction des valeurs plutôt que des indices.

Quand utiliser :
Lorsque vous avez uniquement besoin de travailler avec des valeurs et que vous n'avez pas besoin d'accéder aux index.

Array.prototype.map()
Avantages :

• Non mutant : le tableau d'origine reste inchangé.
• Renvoie un nouveau tableau : après avoir appliqué la fonction spécifiée à chaque élément, map() renvoie un nouveau tableau avec les résultats. Cela le rend idéal pour la programmation fonctionnelle.

Quand utiliser :
Lorsque vous souhaitez appliquer une fonction à chaque élément d'un tableau et que vous avez besoin du résultat sous forme d'un nouveau tableau.

Array.prototype.forEach()
Avantages :

• Aucune valeur de retour : forEach() permet d'exécuter une fonction sur chaque élément sans renvoyer un nouveau tableau. Il est souvent utilisé pour exécuter des effets secondaires, tels que la journalisation, la mise à jour de variables ou la manipulation du DOM.

Quand utiliser :
Lorsque vous souhaitez appliquer une fonction à chaque élément d'un tableau mais que vous n'avez pas besoin de renvoyer un nouveau tableau.

Array.prototype.entries()
Avantages :

• Accès aux index et aux valeurs : entrées() renvoie un itérateur qui fournit à la fois l'index et la valeur de chaque élément. Cela peut être plus simple et plus lisible que d’utiliser une boucle for traditionnelle. Si un emplacement de tableau est vide, il renverra undéfini pour la valeur.

Quand utiliser :
Lorsque vous devez accéder à la fois aux indices et aux valeurs des éléments du tableau.

Array.prototype.keys()
Avantages :

• Accès aux indices : keys() renvoie un itérateur pour les indices du tableau. Ceci est utile lorsque vous n'avez besoin que des indices et non des valeurs. Dans les tableaux clairsemés, [...arr.keys()] inclura également des indices pour les emplacements vides (où la valeur n'est pas définie).

Quand utiliser :
Lorsque vous avez besoin d'un itérateur qui fournit uniquement les indices des éléments du tableau.

Array.prototype.values()
Avantages :

• Accès aux valeurs : values() renvoie un itérateur pour les valeurs du tableau. Ceci est similaire à l'utilisation de for...of avec des tableaux mais fournit un itérateur au lieu d'une boucle.

Quand utiliser :
Lorsque vous avez besoin d'un itérateur qui fournit uniquement les valeurs des éléments du tableau.

Que sont les itérateurs de tableau :
Array.prototype.entries(), Array.prototype.keys() et Array.prototype.values() renvoient de nouveaux objets itérateurs de tableau. Ces itérateurs vous permettent de parcourir une collection de type tableau, un élément à la fois. Ils sont livrés avec une méthode next() qui fournit la valeur suivante dans la séquence, qui peut être appelée selon les besoins, permettant ainsi d'économiser de la mémoire.

Voici un exemple d'utilisation d'entrées() :

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Pour être honnête, je n'étais pas pleinement conscient de certains détails et utilisations de ces méthodes, donc aborder cette question d'entretien et approfondir ma compréhension a été très important. Que vous travailliez avec des boucles de base ou des techniques de programmation fonctionnelle plus avancées, connaître ces méthodes peut améliorer considérablement l'efficacité et la lisibilité de votre code.