Utilisez .forEach() pour itérer sur des éléments en JavaScript

1. Utilisez .forEach() pour exécuter une fonction pour chaque élément d’un tableau en JavaScript
2. Effectuer des vérifications sur chaque élément pour interrompre l’exécution si certaines conditions ne sont pas remplies en JavaScript

L’itération est l’un des outils les plus puissants de l’arsenal de chaque codeur, c’est pourquoi la plupart des langages ont une variété de méthodes associées à différents types de boucles logiques.

JavaScript a une variété de ces méthodes, en fonction de ce que vous essayez de réaliser. Dans ce cas, la méthode .forEach() est un peu plus puissante qu’une simple boucle for, principalement parce qu’elle vous permet d’exécuter une fonction spécifique pour chaque élément sur lequel vous parcourez.

Certes, vous pouvez également utiliser une boucle régulière pour obtenir la même chose si vous imbriquez l’appel de fonction souhaité dans la boucle quelque part, mais .forEach() simplifie un peu le code. De plus, il peut également être un peu plus facile à entretenir par la suite, et cela améliore également la lisibilité.

Pour commencer, voici comment .forEach() peut être utilisé dans votre code :

Utilisez .forEach() pour exécuter une fonction pour chaque élément d’un tableau en JavaScript

Le moyen le plus simple de démontrer l’utilité de .forEach() est de le voir en action lors de l’itération sur un tableau d’éléments.

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(element => console.log(element));

Production :

"element1"
"element2"
"element3"

L’exemple ci-dessus utilise la notation fléchée, mais ce n’est pas la seule option. Le même résultat peut être obtenu en utilisant une fonction de rappel en ligne, comme suit :

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(function(element) {
  console.log(element);
})

Production :

"element1"
"element2"
"element3"

Cette méthode est un peu plus détaillée, ce qui signifie qu’elle nécessite un peu plus de placage à la chaudière. Cela étant dit, la verbosité est parfois une bonne chose à viser si vous travaillez en équipe et que vous souhaitez rendre votre code aussi simple que possible.

Effectuer des vérifications sur chaque élément pour interrompre l’exécution si certaines conditions ne sont pas remplies en JavaScript

Certains d’entre vous ont peut-être déjà remarqué que lorsque vous travaillez avec .forEach(), la fonction associée est toujours exécutée pour chaque élément du tableau. Ce n’est pas toujours souhaitable, surtout si la fonction en question prend beaucoup de puissance de traitement et a un long temps d’exécution.

Dans ces cas, il peut être bon que certaines conditions soient remplies pour que la fonction soit exécutée. Pour y parvenir, tout ce que vous avez à faire est d’introduire une instruction if et de renvoyer quelque chose si les conditions sont évaluées comme fausses.

Voici à quoi cela ressemblerait en action:

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(function(element) {
  if (element === 'element2') {
    return;
  } else {
    console.log(element);
  }
});

Production :

"element1"
"element3"

Comme vous pouvez le voir, la fonction ignore l’élément de tableau qui répond à la condition que nous avons définie. Cependant, l’itération continue avec les éléments suivants dans le tableau, ce qui est le comportement attendu.

Cette méthode évalue chaque élément du tableau avant d’exécuter la fonction associée car il peut y avoir des cas où vous ne souhaitez pas que la fonction soit exécutée. En procédant ainsi, vous éliminez l’étape de filtrage préalable du tableau.