Itération sur un tableau en JavaScript : 5 erreurs fatales et comment les éviter

Comment parcourir un tableau en JavaScript : Top erreurs et comment les éviter

Avez-vous déjà écrit du code qui devait simplement parcourir une liste de tâches ou d'articles dans un panier, mais qui renvoyait à la place undefined, une boucle infinie ou, pire encore, corrompait silencieusement les données ? Une douleur familière. La question "How to loop through the items of an array in JavaScript?" est l'une des plus populaires sur Stack Overflow. Cela semble simple, non ? Mais le diable, comme toujours, se cache dans les détails.

Aujourd'hui, nous n'allons pas simplement voir comment parcourir un tableau en JavaScript. Nous allons examiner les pièges les plus courants dans lesquels tombent les débutants (et pas seulement). Vous découvrirez pourquoi for...in peut vous trahir, en quoi forEach diffère de map, et comment éviter une boucle infinie dans for.

Prêt ? Allons réparer les bugs et écrire du code propre.

Erreur n°1 : Utiliser for...in pour les tableaux

C'est probablement l'erreur de débutant la plus sournoise. Le développeur voit le mot for et le mot in et pense : "Oh, ça sert à parcourir tout et n'importe quoi !". Techniquement, c'est vrai. Mais pour les tableaux, c'est une catastrophe.

La boucle for...in est conçue pour parcourir les propriétés d'un objet, pas les éléments d'un tableau. Oui, un tableau en JS est aussi un objet, mais ses indices ne sont que des clés de type chaîne de caractères ("0", "1", "2").

Voici le piège :

\n
• L'ordre n'est pas garanti. Bien que les navigateurs respectent généralement l'ordre, il ne faut pas s'y fier.
\n
• Il parcourt toute la chaîne de prototypes. Si vous ou une bibliothèque avez ajouté une méthode à Array.prototype (par exemple, Array.prototype.myCustomMethod = function() {}), for...in la prendra également en compte.
\n

Exemple de code (à NE PAS faire) :

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // Affiche : 10, 20, 30, ƒ () => {}\n}\n

Vous voyez ? À la fin, notre fonction personnalisée est apparue. Le code est cassé.

Comment faire correctement :

Utilisez for...of (pour les valeurs) ou la boucle for classique (pour les indices). for...of ne parcourt que les valeurs et ignore le prototype.

// Correct et sûr\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

Erreur n°2 : Oublier le callback dans forEach

arr.forEach(callback) est une façon élégante de parcourir un tableau en JavaScript. Mais beaucoup le confondent avec map ou filter. La principale erreur est de penser que forEach retourne quelque chose. Il retourne undefined.

La deuxième erreur courante est d'oublier les deuxième et troisième arguments du callback (l'indice et le tableau lui-même). Parfois, c'est crucial.

Exemple d'erreur :

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined ! Erreur.\n

Comment faire correctement :

Si vous devez créer un nouveau tableau basé sur l'ancien, utilisez map(). Si vous devez seulement effectuer une action (par exemple, afficher dans la console ou envoyer des données), utilisez forEach().

// Pour créer un nouveau tableau\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// Pour les effets de bord\nnumbers.forEach((num, index) => {\n  console.log(`Élément ${index} : ${num}`);\n});\n

Erreur n°3 : Boucle infinie dans for

Un grand classique. Vous écrivez for (let i = 0; i < arr.length; i++), mais vous oubliez l'incrémentation i++ ou, pire encore, vous modifiez le tableau à l'intérieur de la boucle.

Supposons que vous filtreriez le tableau à la volée en supprimant des éléments avec splice(). Si vous ne corr