Comment utiliser la méthode javascript foreach pour faire des boucles ?

Les développeurs informatiques utilisent le langage javascript pour créer des petites animations sur une page web. Ils emploient plusieurs méthodes pour exécuter des boucles : la méthode for(), la méthode each(), la méthode for…in et bien d’autres encore. Dans cet article, vous allez savoir utiliser la méthode javascript foreach, en la comparant avec les autres manières de faire des boucles. 

Qu’est-ce qu’une boucle en javascript ? 

Une boucle est le fait de répéter une succession d’actions d’une manière simple et rapide. Elle peut être utilisée pour faire plusieurs copies d’une ligne ou d’exécuter une opération maintes fois. 

Il existe différents types de boucles qui possèdent chacun différentes manières de débuter ou de finir une action. Le choix de boucle à utiliser pour un développement informatique dépend du résultat que vous voulez obtenir. 

Deux bibliothèques proposent actuellement les méthodes les plus connues pour gérer les boucles : 

• jQuery : crée en 2006 pour faciliter l’écriture des scripts en agissant sur les codes HTML, CSS et Javascript
• EcmaScript : introduite par Ecma International qui est une programmation de scripts standards

Javascript propose différentes boucles mais les plus utilisées sont : 

• La méthode for
• Les méthodes while et do…while
• Les instructions break et continue
• Les versions améliorées de for comme for…in, for…of ou javascript foreach

Les aptitudes de la méthode javascript foreach 

Javascript foreach travaille sur les propriétés d’un tableau. La méthode donne la possibilité d’effectuer une fonction sur chaque élément du tableau. 

Si vous changez les informations contenues dans le tableau en cours d’itération, la boucle ne fonctionnera pas sur ces modifications. Il faut donc que vous exécutez javascript foreach sur un tableau finalisé. 

Quand foreach est lancée, elle utilise la fonction callback, comprenant 3 arguments : 

• La valeur de l’élément
• L’indice de l’élément
• Le tableau sur lequel la méthode est directement appliquée

En option, elle peut considérer deux paramètres : 

• L’indexation qu’on ajoute à la signature callback
• La collection où foreach travaille

Avec foreach, la boucle tourne jusqu’à la fin. Aucune fonction comme « break » ni « return » ne permet d’en sortir. 

Pour interrompre une itération, le développeur doit entrer une instruction d’exception. 

Mais quelles sont les particularités de foreach par rapport aux autres méthodes de scripts java ? 

La comparaison entre les méthodes javascript foreach et for

La boucle for est la méthode de base pour un langage de script de java. Si vous avez l’habitude de faire des boucles dans vos développements, vous l’avez sûrement déjà utilisé. Elle peut s’appliquer à n’importe quelle demande. La boucle forcomporte trois actions : 

• Une première qui s’active avant la boucle, ex i=0
• Une deuxième qui décrit la durée de la boucle, comme i<10
• La dernière montre ce que la méthode doit faire une fois que la boucle soit exécutée, du genre i++

Si nous expliquons d’une manière simple cet exemple, d’abord, nous définissons i égal à 0 précédent la boucle. Ensuite, nous demandons à java de refaire la boucle jusqu’à ce que i soit inférieur à 10. Puis, à chaque répétition, i sera augmenté de 1. Et enfin, l’action à faire à chaque boucle sera en langage codifié mis entre parenthèse. 

Dans le cas de javascript foreach, la variable i à déclarer est de même nature que celle dans le tableau de base, ponctuée de deux points et du nom du tableau. 

Il existe 2 instructions que vous devez prendre en compte : 

• L’instruction « break » qui arrête la boucle
• Le code « continue » qui demande à for de passer directement à la prochaine itération

Comparée à javascript foreach, la méthode for est limitée sur 2 aspects : 

• Les champs d’action : la boucle for ne peut pas travailler sur les tableaux ou les objets.
• L’écriture des codes : la boucle foreach est plus facile et plus lisible à transcrire.

Et qu’en est-il de la méthode for..in qui semble plus évoluée ? 

La comparaison entre la boucle for..in et la boucle foreach en javascript 

Lorsque l’objet possède une propriété d’énumération, la méthode for..in est la plus appropriée pour faire une boucle. Pour chaque propriété, elle effectue l’instruction prescrite. La boucle for...in ne parcourt que les valeurs des clés d’un objet suivant 4 attributs : 

• Value
• Writtable
• Enumerable
• Configurable

Quand l’attribut « enumerable » est « true », ça veut dire que le développeur peut toucher cette propriété. 

Elle peut parcourir des tableaux, mais réserve quelques surprises. Si vous modifiez le tableau en cours de boucle, la méthode for..in prend en compte ces modifications. Ainsi vous pourrez confondre les propriétés modifiées et les indices de base du tableau. Ce qui pénalise cette méthode par rapport à javascript foreach, qui agit directement sur les propriétés du tableau. 

Mais existe-t-il des méthodes qui itèrent efficacement sur les tableaux ? 

La méthode .each() de jQuery

Cette méthode est la plus facile à manipuler pour agir sur les éléments DOM de l’objet jQuery. DOM signifie Document Object Model, qui est une représentation mémoire d’un document XML. DOM permet à son utilisateur d’agir sur cette représentation sans tenir compte du langage utilisé par celui-ci. 

Cette méthode comporte deux aptitudes : 

• A chaque itération, il passe la récurrence en cours, à partir de 0
• Le callback agit directement sur l’élément DOM courant de l’objet. Pour cela, each emploie le mot-clé « this » pour identifier l’élément
• « false » est l’instruction permettant de mettre fin à l’itération

Par rapport à javascript foreach qui manipule les tableaux, cette manière va plus dans les détails de l’objet. 

Et n’y a-t-il pas une méthode plus générique ? 

La boucle générique jQuery.each() 

Appelée aussi $.each(), cette méthode se dit générique, car elle exécute en même temps une boucle sur 2 éléments : 

• les objets
• les tableaux comme javascript foreach

Si l’objet présente une unité de longueur, jQuery.each est la meilleure manière à adopter. La fonction d’itération est indexée numériquement de 0 à la longueur-1 du tableau. Cette fonction offre plus de latitude que $(selector).each(), qui boucle uniquement les objets jQuery. 

Dans le parcours d’un tableau, la transmission de la récurrence se fait à chaque correspondance entre l’index et la valeur du tableau.  Le mot-clé « this » peut également être utilisé dans ce cas. 

Pareillement, c’est l’instruction « false » qui permet de terminer la boucle   

jQuery.ecah semble être la manière qui prend en compte tous les éléments, mais il existe une instruction encore plus vaste. 

L’instruction for ..of d’ES6

C’est la version de javascript foreach qui est capable de terminer une boucle. Son domaine d’action est plus large, car elle agit sur tous les objets que vous pouvez répéter, par exemple :

• un array ou le tableau sur lequel javascript foreach s’applique
• une map
• un objet

Dans for..of, vous pouvez employer la fonction « const » au lieu de « let » pour limiter l’accessibilité à une lecture seule. Cette fonction permet ainsi de mieux sécuriser la méthode que vous utilisez. 

Comparée à l’instruction for..in, la méthode for..of explore les noms des propriétés et non pas leurs valeurs. Vous ne pouvez pas non plus supprimer ou rajouter des instructions à la main comme vous pouvez le faire avec for..in

La méthode javascript some()

EcmaScript5 étant son créateur en 2009. Cette méthode explore le tableau,  comme javascript foreach,  pour repérer au moins un élément correspondant à la demande. Elle s’arrête automatiquement dès qu’elle trouve un élément qui correspond à la particularité demandée.  

La méthode some() considère les focntions « true » et « false ». 

La méthode javascript every()

Quand tous les éléments du tableau sont soumis à une condition donnée, cette méthode contrôle le suivi de cette condition. Elle résulte deux fonctions : 

• la fonction « true » qui traduit la validation de la condition posée
• la fonction « false » si la condition n’a pas été respectée

Elle possède aussi une fonction fléchée pour raccourcir le code sans pour autant nuire à la lisibilité du résultat 

La différence entre cette méthode et celle de javascript foreach réside dans le fait que l’instruction s’applique seulement sur les éléments validés par la condition mais pas sur tous les éléments du tableau. 

Si la fonction « false » apparaît sur un élément, aucun autre élément du tableau ne sera itéré. Donc une erreur n’a pas d’impact sur les éléments validés. 

Les limites de la méthode javascript foreach

En résumé, la méthode jevascript foreach est limitée dans les cas suivants : 

• si vous voulez apporter des changements dans le tableau, elle n’est pas la meilleure méthode à adopter
• la boucle ne mémorise pas les indexations que vous avez faites sur le tableau
• le parcours qu’elle fait dans le tableau se dirige uniquement dans un seul sens
• foreach n’intègre pas les conditions

Source image à la une : pixabay