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

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 map 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.

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
....
$( "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 capaciter 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
}

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). 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 restent encore incontournables à mon sens)

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


siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *