Les boucles (for, foreach, each) en javascript

Edit : 25 décembre 2024

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.

la boucle for en javascript

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

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 while en JavaScript

La boucle while est une structure de contrôle permettant d’exécuter un bloc de code tant qu’une condition donnée reste vraie. Elle est particulièrement utile lorsque le nombre d’itérations n’est pas déterminé à l’avance. Contrairement à la boucle for qui intègre l’initialisation, la condition et l’incrémentation en une seule instruction, la boucle while se contente de vérifier la condition avant chaque itération, ce qui lui confère une grande flexibilité.

Voici un exemple simple d’utilisation de la boucle while :

// Initialisation de la variable
let i = 0;

// Exécution de la boucle tant que la condition est vraie
while (i < 5) {
  console.log("La valeur de i est : " + i);
  i++; // Incrémentation de la variable
}

Dans cet exemple, la boucle s’exécute tant que la variable i est inférieure à 5. À chaque itération, la valeur de i est affichée dans la console, puis incrémentée de 1.

Différence entre la boucle for et la boucle while :
La boucle for est généralement utilisée lorsque le nombre d’itérations est connu à l’avance, car elle permet d’initialiser, de tester et d’incrémenter la variable de contrôle en une seule ligne. En revanche, la boucle while convient mieux lorsque la condition de fin est déterminée de manière dynamique, offrant ainsi une plus grande souplesse dans la gestion des cas où le nombre d’itérations n’est pas prévisible.

La boucle do…while en JavaScript

La boucle do...while est celle qui n’hésite jamais à se lancer, même si la condition n’est pas encore vérifiée ! Contrairement à la boucle while qui teste d’abord la condition, la do...while exécute son bloc de code au moins une fois, pour dire : « Allez, on se lance, et après on vérifie si on continue ! »

Cette approche est idéale pour les cas où vous souhaitez être sûr(e) que le code s’exécute au moins une fois, un peu comme ce collègue qui ne rate jamais une occasion de tester la machine à café, même si le café est déjà trop fort !

Voici un exemple concret pour illustrer son fonctionnement :

// Exemple de boucle do...while en JavaScript
let j = 0;

do {
  console.log("La valeur de j est : " + j);
  j++; // On incrémente j à chaque itération
} while (j < 3);

Dans cet exemple, même si la condition j < 3 est testée à la fin de la boucle, le bloc de code est exécuté dès le départ. C’est particulièrement utile quand vous devez garantir qu’une action se produise au moins une fois avant de décider de poursuivre ou non.

Petit bonus geek : La boucle do...while est souvent utilisée pour gérer des interactions utilisateur, par exemple pour demander une confirmation ou une saisie, et ce, même si l’utilisateur est un peu endormi au clavier !

Comparaison avec la boucle while :
Alors que la boucle while vérifie la condition avant d’exécuter le bloc de code (et peut donc ne jamais s’exécuter si la condition est fausse dès le début), la boucle do...while s’assure que le bloc de code est exécuté au moins une fois, offrant ainsi une garantie d’exécution initiale. Cette différence peut être déterminante selon le contexte de votre application.

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.

<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 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
}

For Await…of (ES2018)

Une des nouvelles boucles introduites avec ES2018 est la boucle for await...of. Elle permet d’itérer sur des objets asynchrones, comme les Promises. C’est particulièrement utile lorsqu’on doit effectuer plusieurs requêtes réseau ou traiter des tâches asynchrones.

const promises = [fetch('/data1'), fetch('/data2')];
for await (const response of promises) {
  console.log(await response.json());
}

Cette boucle est indispensable pour la gestion de tâches en parallèle.

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.

La méthode javascript map()

map() : Crée un nouveau tableau en appliquant une fonction à chaque élément.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6]

La méthode javascript reduce()

reduce() : Accumule les valeurs d’un tableau en une seule valeur.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 10

Ces méthodes sont plus performantes et lisibles pour des opérations de transformation de tableaux.

Comparaison des boucles en fonction des cas d’utilisation

Voici un tableau comparatif pour choisir la boucle idéale selon le contexte :

Boucle	Cas d’utilisation	Particularités
for	Général, simple itération	Haute flexibilité, utilisé pour tout type d’itération.
forEach()	Boucles sur les tableaux	Ne permet pas de stopper la boucle.
for...of	Itération sur les valeurs des objets itérables	Plus concise que forEach().
for...in	Itération sur les propriétés énumérables d’objets	A éviter pour les tableaux.
for await...of	Itération sur des objets asynchrones	Gère les Promises dans les boucles.

---

La FAQ des boucles en JS

Ma conclusion sur boucles JS

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 en attendant la Temporal API JavaScript)

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