Les boucles (for, foreach, each) en javascript

Il existe en javascript une multitude de manière de faire des boucles pour parcourir des tableaux ou des objets. Nous allons voir de plus près certaines de ces manières, en passant par le simple for(), par la méthode each() de jQuery et pour finir sur la nouvelle boucle for..of de EcmaScript 6

Edit sept 2019 : certaines méthodes comme some() et every() introduites par EcmaScript 5 m’ont semblées intéressantes mais peu utilisées (voire méconnues) je me suis donc décidé à les ajouter en supplément.

• L’instruction for
• L’instruction for..in
• La méthode .forEach()
• La méthode each() de jQuery
• L’instruction for..of
• Méthodes de tableau introduites en ES5 :
  • La méthode js some()
  • La méthode js every()

la boucle for en javascript

Voici un petit rappel rapide et simple sur la boucle for :

Vous avez probablement déjà utilisé un pour la boucle avant. C’est la boucle la plus basique en JavaScript et elle est très polyvalente. Voici les bases de la syntaxe des boucles :

for (i = 0; i < 10; i++) {    // do something }

Notre pour boucle se compose de trois instructions, une qui est exécutée avant que notre boucle commence ( i = 0), une qui définit combien de temps notre boucle devrait fonctionner ( i < 10), et une qui est exécutée après chaque boucle ( i++ ).

Dans cet exemple, nous réglons i = 0 avant le début de notre boucle. Nous continuerons à boucler aussi longtemps que i < 10, et chaque itération de la boucle augmentera i de un. Enfin, entre parenthèses se trouve le code qui sera exécuté à chaque itération de la boucle.

• Une boucle for peut être interrompue en utilisant l’instruction break
• On peut passer à l’itération suivante en utilisant le mot clé continue

Cette instruction nous permet de faire beaucoup de choses; elle est très polyvalente donc mais pas super pratique lorsqu’il s’agit de bosser avec les tableaux ou les objets…

Voyons si nous pouvons trouver mieux

La boucle for..in en javascript

L’instruction for..in en javascript permet d’itérer sur l’ensemble des propriétés énumérables d’un objet :

let student = { name:"Bill", age: 25, degree: "Masters" }; for (var item in student) {    alert(student[item]) } // résultats : // Bill // 25 // Masters

Cette instruction permet également d’itérer sur les tableaux mais elle peut avoir des comportements inattendus. En effet l’instruction permet d’itérer sur les propriétés ajoutées manuellement en plus des éléments du tableau ce qui pourrait porter à confusion.

La méthode .forEach()

Introduite en ES5, la methode forEach permet d’itérer sur les propriétés d’un tableau

const list = ['a', 'b', 'c'] list.forEach((item, index) => {   console.log(item) //value   console.log(index) //index })  //index is optional list.forEach(item => console.log(item))

Attention toutefois, la méthode n’utilise pas une copie du tableau lorsqu’elle est appelée, elle manipule le tableau directement. Donc si on modifie le tableau en cours de route alors les boucles pourront être impactées. Il existe aussi plusieurs autres méthodes sympas pour itérer sur les tableaux (comme some ou every)

let mots = ["un", "deux", "trois", "quatre"]; mots.forEach((mot) => {   console.log(mot);   if (mot === "deux") {     mots.shift();   } }); // un // deux // quatre

Par contre l’interruption de la boucle avec break ou continue n’est pas possible à moins de lever une exception

Les méthodes each de jQuery

La méthode .each() sur un objet jQuery

Si vous utilisez jQuery alors il existe une méthode bien pratique pour itérer sur toutes les propriétés d’un objet jQuery. Lorsqu’elle est appelée, elle itére sur les éléments DOM qui font partie de l’objet jQuery. Chaque fois que le rappel s’exécute, il est passé à l’itération courante, à partir de 0. plus important encore, la fonction de callback est déclenchée dans le contexte de l’élément DOM courant, de sorte que le mot-clé this se rapporte à l’élément.

   
foo
   
bar
 
 .... $( "li" ).each(function( index ) {   console.log( index + ": " + $( this ).text() ); }); .... // foo // bar 

Les itérations peuvent être stoppées dans la fonction de callback en retournant false

L’itérateur générique jQuery.each()

jQuery.each() (ou $.each()) est une fonction générique d’itérateur, qui peut être utilisée pour itérer de manière transparente à la fois sur les objets et les tableaux. Les tableaux et les objets de type tableau ayant une propriété de longueur (comme l’objet arguments d’une fonction) sont itérés par index numérique, de 0 à longueur-1. D’autres objets sont itérés via leurs propriétés nommées.

La fonction $.each() n’est pas la même que $(selector).each(), qui est utilisé pour itérer, exclusivement, sur un objet jQuery. La fonction $.each() peut être utilisée pour itérer sur n’importe quelle collection, que ce soit un objet ou un tableau. Dans le cas d’un tableau, le rappel est transmis à chaque fois un index de tableau et une valeur de tableau correspondante. (La valeur peut aussi être accédée par le mot-clé this, mais Javascript enveloppera toujours cette valeur comme un objet même si c’est une simple chaîne de caractères ou une valeur numérique.) La méthode retourne son premier argument, l’objet qui a été itéré.

$.each([ 52, 97 ], function( index, value ) {   alert( index + ": " + value ); }); // 52 // 97

let obj = {   "flammable": "inflammable",   "duh": "no duh" }; $.each( obj, function( key, value ) {   alert( key + ": " + value ); }); // flammable: inflammable // duh: no duh

Ici aussi les itérations peuvent être stoppées en renvoyant false dans la fonction de callback

L’instruction for..of ES6

ES6 a introduit la boucle for..of qui combine la concision de forEach avec la capacité de stopper les itérations. Elle fonctionne sur tous les objets itérables (incluant Array, Map, Objet…)

//iterate over the value for (const value of ['a', 'b', 'c']) {   console.log(value) //value }  //get the index as well, using `entries()` for (const [index, value] of ['a', 'b', 'c'].entries()) {   console.log(index) //index   console.log(value) //value }

Notez l’utilisation de const. Cette boucle crée une nouvelle portée à chaque itération, de sorte que nous pouvons l’utiliser en toute sécurité au lieu du mot clé let.

La différence avec la boucle for..in est que cette dernière parcourt les noms des propriétés alors que la boucle for..of itère sur les valeurs des propriétés. De plus les ajouts manuels ne sont pas pris en compte dans la boucle for..of (à l’inverse de la boucle for..in)

let arr = [3, 5, 7]; arr.toto = "coucou";  for (let i in arr) {   console.log(i); // affiche 0, 1, 2, "toto" dans la console }  for (const i of arr) {   console.log(i); // affiche 3, 5, 7 dans la console }

En bonus, certaines méthodes de tableaux introduites par ES5

La méthode javascript some()

Introduite en 2009 avec EcmaScript 5, la méthode some() détermine si au moins un élément du tableau correspond au prédicat donné. Elle ne retourne false que si aucun des éléments du tableau ne remplit la condition.

Avec l’introduction des fonctions fléchés dans ECMAScript 2015, nous pouvons intégrer la fonction prédicat tout en conservant la lisibilité :

let arr = [3, 5, 7];  console.log(arr.some(x => x > 7)); // affiche false console.log(arr.some(x => x > 5)); // affiche true 

Notez que some() arrête l’itération sur le tableau dès qu’il trouve un élément qui correspond au prédicat. Dans ce cas, il retourne immédiatement true sans inspecter les éléments restants.

La méthode javascript every()

La méthode every() est utilisée pour vérifier une condition sur tous les éléments du tableau (ou des éléments spécifiés) et retourne true si tous les éléments valident la condition et false si un élément ne correspond pas à cette condition.

Comme précédemment nous pouvons utiliser les fonctions fléchées pour un code plus court tout en conservant la lisibilité :

let arr = [3, 5, 7];  console.log(arr.every(x => x > 3)); // affiche false console.log(arr.every(x => x > 2)); // affiche true

De la même manière qu’avec some(), dès que every() trouve un élément de tableau qui ne correspond pas à la condition, il retourne false et n’itère pas sur les autres éléments.

Conclusion

Il existe de multiples façons de faire des boucles en javascript. Nous n’avons pas parlé ici des boucles while et do..while qui ne sont pas vraiment utilisées (si vous le souhaitez demandez moi et je me ferai un plaisir d’ajouter des instructions dans l’article). Je n’ai pas non plus parlé de la méthode javascript map() ou de la méthode filter() (mais j’ai fait un autre article ou je décortique et ré-écris ces fonctions pour mieux les comprendre; vous pouvez aller y jeter un oeil si vous êtes curieux)

Certaines librairies comme jQuery nous donnent accès à des méthodes qui permettaient de simplifier la gestions des boucles et itérations mais EcmaScript évolue très vite et il n’est plus nécessaire maintenant d’ajouter des librairies externes pour créer du code simple et lisible. (Certaines autres librairies comme moment.js pour la gestion des dates restent par contre incontournables)

Si vous avez des questions ou des ajouts à faire, n’hésitez pas à m’en faire part en laissant un commentaire ?