W3docs

Les boucles JavaScript

Apprenez les boucles JavaScript : for, while, do...while, for...in et for...of, ainsi que break et continue. Syntaxe claire, exemples exécutables et pièges courants.

Introduction aux boucles JavaScript

Les boucles JavaScript sont un concept fondamental en programmation qui permet d'exécuter des blocs de code plusieurs fois. Ce guide propose une compréhension approfondie des différents types de boucles en JavaScript, de leur syntaxe et de leurs applications pratiques.

Qu'est-ce qu'une boucle en JavaScript ?

Une boucle exécute le même bloc de code encore et encore tant qu'une condition reste vraie. Chaque passage dans le corps est appelé une itération. Les boucles permettent de traiter chaque élément d'une liste, de répéter une action un nombre fixe de fois, ou de continuer jusqu'à ce qu'un état change — sans avoir à copier-coller du code.

Pourquoi utiliser des boucles ?

Sans boucles, vous devriez écrire la même instruction une fois pour chaque répétition :

console.log(1);
console.log(2);
console.log(3);
// ...and so on for every number

Une boucle condense cela en quelques lignes qui fonctionnent aussi bien pour 3 nombres que pour 3 millions. Le résultat est un code plus court, plus facile à modifier et beaucoup moins sujet aux erreurs.

Comprendre les différents types de boucles

Examinons les différentes boucles disponibles en JavaScript, leur syntaxe et la façon de les utiliser efficacement.

La boucle while

La boucle while est le type de boucle le plus simple en JavaScript. Elle vérifie la condition avant chaque itération et continue tant que cette condition est vraie. Utilisez-la quand vous ne savez pas à l'avance combien de fois vous devez répéter — par exemple, lire des données jusqu'à rencontrer un marqueur de fin.

Syntaxe :

while (condition) {
  // code to be executed
}

Exemple :

javascript— editable

Le corps doit finalement rendre la condition fausse. Dans le cas contraire, vous créez une boucle infinie qui bloque la page. Le i++ ci-dessus est ce qui garantit la fin de la boucle — oubliez-le et i < 5 restera vrai pour toujours.

La boucle do...while

La boucle do...while vérifie sa condition après chaque itération, de sorte que le corps s'exécute toujours au moins une fois — même si la condition est fausse dès le départ. C'est pratique pour les invites ou les menus qui doivent s'afficher au moins une fois avant de décider de répéter.

Syntaxe :

do {
  // code to be executed
} while (condition);

Exemple :

javascript— editable

La boucle for

La boucle for est la boucle la plus couramment utilisée. Elle regroupe trois parties en une seule ligne : une initialisation (exécutée une seule fois au début), une condition (vérifiée avant chaque itération) et une expression finale (exécutée après chaque itération, généralement pour incrémenter un compteur). C'est le choix naturel lorsque vous savez combien de fois vous souhaitez répéter.

Syntaxe :

for (initialization; condition; finalExpression) {
  // code to be executed
}

Exemple :

javascript— editable

La boucle for...in

Cette boucle itère sur les noms de propriétés (clés) énumérables d'un object. Utilisez-la lorsque vous avez besoin des clés d'un object. Évitez-la pour les arrays : elle produit des index de type string ("0", "1", …), ne garantit pas l'ordre et parcourt également les propriétés héritées — utilisez plutôt for...of ou les méthodes de tableau.

Syntaxe :

for (variable in object) {
  // code to be executed
}

Exemple :

javascript— editable

La boucle for...of

La boucle for...of itère sur les valeurs des objects itérables tels que les arrays, les strings, Map et Set. C'est la façon la plus claire de parcourir les éléments d'un tableau lorsque vous n'avez pas besoin de l'index. Retenez la différence : for...in donne les clés, for...of donne les valeurs.

Syntaxe :

for (variable of iterable) {
  // code to be executed
}

Exemple :

javascript— editable

Choisir la bonne boucle

BoucleIdéale pourCe qu'elle fournit
forUn nombre connu de répétitions, ou lorsque vous avez besoin de l'indexUn compteur que vous contrôlez
whileRépéter jusqu'à ce qu'une condition change, nombre inconnuRien — vous gérez l'état
do...whileComme while, mais doit s'exécuter au moins une foisRien — exécute le corps en premier
for...inItérer sur les clés d'un objectNoms de propriétés (strings)
for...ofItérer sur les valeurs d'un array, string, Map ou SetChaque valeur

Pour la plupart des opérations sur les tableaux, vous rencontrerez aussi des méthodes comme forEach, map et filter (voir méthodes de tableau) — elles sont souvent plus lisibles qu'une boucle manuelle.

Boucles imbriquées

Une boucle peut contenir une autre boucle. La boucle interne s'exécute entièrement pour chaque passage de la boucle externe, ce qui est utile pour les grilles, les tableaux et les paires.

javascript— editable

Contrôler l'exécution des boucles

Utiliser break dans les boucles

L'instruction break peut être utilisée pour sortir d'une boucle avant que la condition ne soit fausse.

Exemple :

javascript— editable

Utiliser continue dans les boucles

L'instruction continue passe l'itération en cours et continue avec la suivante.

Exemple :

javascript— editable

Sortir de boucles imbriquées

Par défaut, break ne quitte que la boucle la plus interne. Pour sortir d'une boucle externe depuis une boucle interne, donnez un label à la boucle externe et utilisez break vers ce label.

javascript— editable

Conclusion

Comprendre et utiliser efficacement les différents types de boucles en JavaScript améliore votre capacité à écrire du code concis et efficace. Choisissez for lorsque vous connaissez le nombre d'itérations, while/do...while lorsque vous ne le connaissez pas, for...of pour les valeurs et for...in pour les clés d'object — et méfiez-vous des boucles infinies.

Continuez avec les sujets connexes : opérateurs conditionnels, arrays, méthodes de tableau et fonctions.

Pratique

Pratique
Lesquelles des affirmations suivantes sur les boucles JavaScript sont correctes ?
Lesquelles des affirmations suivantes sur les boucles JavaScript sont correctes ?
Was this page helpful?