Pourquoi vous pouvez ' t casser une boucle forEach / ByteSize JS

J’ai récemment eu une interview de codage qui impliquait d’évaluer un schéma par rapport à un autre. Les détails ne sont pas si importants, mais une chose qui en est sortie (au milieu de l’interview) était que vous ne pouvez pas sortir d’une boucle forEach(). J’avais oublié cette petite friandise et cela a probablement gâché mes chances d’être embauché. Après avoir lu ceci, j’espère que vous ne ferez pas la même erreur que moi! Ne sois pas comme moi.

Si vous préférez regarder que lire, consultez la version vidéo de ceci!

MDN Sait tout

Comme indiqué par MDN:

Il n’y a aucun moyen d’arrêter ou de casser une boucle forEach() autrement qu’en lançant une exception. Si vous avez besoin d’un tel comportement, la méthode forEach() est le mauvais outil

C’est un sass hardcore provenant des documents MDN. Cependant, ils ont raison, savoir quel outil choisir est important.

Avant de trop comprendre pourquoi vous ne pouvez pas sortir d’un forEach(), examinons ce qu’est même une boucle et d’où vient forEach().

Qu’est-ce qu’une boucle

Une boucle en programmation résout un problème assez courant: J’ai besoin d’exécuter le même code contre toutes ces données. En termes simples, c’est:

Répéter le même code encore et encore (en boucle) jusqu’à ce que nous atteignions un état final défini.

Le problème

Pour des raisons de comparaison, nous allons résoudre le même problème en utilisant les différents types de boucles. Voici le problème:

Comparez deux tableaux et voyez si les éléments qu’ils contiennent sont les mêmes.

Voici les données que nous allons comparer:

 const jedis = const sith = 

Nous avons deux tableaux, tous deux avec quelques noms. Vous remarquerez probablement qu’Anakin est à la fois un Jedi et un Sith. C’est un exemple trivial, mais pas loin de ce sur quoi j’ai été testé lors de mon entretien.

À l’ancienne

Ce que je ne veux pas que vous obteniez de cet article, c’est qu’une boucle est meilleure qu’une autre. Ils offrent tous des solutions de programmation uniques et ont une place pour des cas d’utilisation spécifiques. L’astuce consiste à savoir lequel utiliser quand.

Boucle For traditionnelle

Si vous avez déjà suivi un cours de programmation, vous avez probablement été exposé à notre bon ami la boucle for. C’est un outil pratique pour les programmeurs depuis longtemps et il est toujours utile aujourd’hui. Résolvons notre problème en l’utilisant.

// Our data again, for referenceconst jedis = ;const sith = ;// start our loop, define our iterator variablefor (let i = 0; i < jedis.length; i++) { // create a variable we can reference const thisJedi = jedis; // see if the item in the array we are testing exists if (sith.includes(thisJedi)) { // If it does exist, then that jedi is also a sith console.log(`${thisJedi} is also a Sith`); // we can exit out break; } console.log(`${thisJedi} is not a Sith`);}

La boucle for offre un moyen assez pratique de quitter notre code s’il répond à une condition que nous choisissons. Ceci est extrêmement utile lorsque vous bouclez une TONNE de données. Cela a été très utile pour résoudre certains des problèmes du projet Euler, en particulier celui-ci.

La nouvelle Autre Façon

Entre autres choses, forEach() a été estampillée dans la spécification en 2009 avec toutes les autres qualités qui nous ont été données dans ES5. Il sert de méthode pratique pour écrire du code propre qui itère facilement sur des éléments d’un tableau.

Que fait-il ?

Une boucle forEach() est une fonction qui exécute une autre fonction (rappel) sur chaque élément d’un tableau. Nous définissons ce qui se passe dans cette fonction de rappel. JS est assez gentil pour nous donner trois paramètres dans cette fonction:

1. L’élément du tableau
2. L’index de l’élément
3. L’ensemble du tableau

Jetons un coup d’œil à notre problème en utilisant une boucle forEach() à la place. J’ai inclus les trois paramètres dans la fonction, mais nous n’utilisons que le premier, l’élément, que je nomme jedi

 // We have to create a global state variable to keep track of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => { // check to see if jedi is in sith if(!sith.includes(jedi)) { // if it isn't, set global variable to false matching = false } // it keeps going... }) console.log(matching) // false

Si cela a plus de sens, vous pouvez refactoriser la fonction de rappel en une fonction nommée. Je pense que cela le rend un peu plus lisible. Cela nous permet également de réutiliser cette fonction où nous le souhaitons. Yay programmation fonctionnelle!

 let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)

Notre solution fait essentiellement la même chose. La seule différence est qu’il continue de fonctionner jusqu’à ce qu’il atteigne la fin du tableau jedis. Pour un tableau d’une si petite taille, je doute que cela fasse une grande différence de performance.

Mais pourquoi ?

Cela nous amène enfin à la réponse à notre question, pourquoi ne pouvons-nous pas sortir d’une boucle forEach()? C’est parce que la boucle exécute cette fonction de rappel sur chaque élément, donc même si vous écrivez un return, il ne revient que sur cette instance de la fonction. Ça continue. Dans le cas de la fonction forEach(), elle ne fait rien avec le code renvoyé. Sachez que ce n’est pas le cas pour certaines des autres méthodes de tableau.

De plus, à cause de cela, break ou continue ne sont pas des instructions valides.

Autres moyens

Il existe plusieurs types de boucles différents. Ils ont tous des objectifs différents et je vous recommande de regarder chacun d’eux. Vous n’avez pas toujours besoin d’une boucle forEach().

forEach() vs map()

Probablement, les méthodes de tableau les plus courantes qui apparaissent dans les tutoriels sont forEach() et map(). La plus grande différence entre les deux est que map renverra un nouveau tableau, tandis qu’un forEach() ne le fera pas.

Boucles traditionnelles

Boucle while

Méthodes de tableau

Tableau.forEach()

Tableau.carte()

Tableau.filter()

Tableau.reduce()

Tableau.reduceRight()

Tableau.chaque tableau ()

.certains ()

Tableau.indexOf()

Tableau.lastIndexOf()

Tableau.find()

Tableau.findIndex()

Boucles d’objets Itérables (y compris les tableaux)

pour dans

pour de

C’est ainsi que

Comme mentionné précédemment par les documents MDN incroyablement impertinents, choisir le bon outil est primordial pour le succès. Le nombre d’options peut sembler un peu écrasant au premier abord, mais j’aime adopter l’approche suivante: « si cela fonctionne, c’est le bon outil. »

De manière générale, vous pouvez refactoriser votre code à mort, mais alors vous perdez du temps, vous pourriez construire des choses. Dans le cas de mon entretien, j’utilisais le bon outil, dans le mauvais sens. Si j’avais su me rappeler que vous ne pouvez pas sortir d’une boucle forEach, les choses se seraient probablement avérées différentes️️.

Si vous avez des informations supplémentaires à partager, veuillez les déposer dans les commentaires ci-dessous!

Comme toujours, bon codage.

Plugs

J’écris un livre sur le design graphique et son lien avec le développement de logiciels! Si vous êtes intéressé, inscrivez-vous ici pour les mises à jour.

https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy

Musique

J’écris aussi de la musique! Découvrez-le ici: Spotify / Youtube / Apple Musique

Support

Si vous aimez cet article et que vous voulez en voir plus, la meilleure façon de le faire est de vous abonner / de me suivre ici! Si vous vous sentez gracieux, vous pouvez m’acheter un café!