Chaque type de boucle JavaScript expliqué : [With Codeblocks and Examples]

Table des matières

JavaScript se positionne comme l’un des langages de programmation les plus répandus. Pour les développeurs aspirant à devenir ingénieurs JavaScript, l’apprentissage des bases des boucles, leurs divers types et leur fonctionnement est primordial.

Une boucle en JavaScript est un mécanisme permettant d’exécuter des opérations répétitives en fonction de critères spécifiques. Le terme « itérer » fait référence à cette répétition dans le contexte des boucles. Une boucle poursuit ses itérations jusqu’à ce qu’une condition d’arrêt soit remplie.

Pour mieux saisir ce concept, imaginez un jeu vidéo où vous êtes invité à faire un certain nombre de pas vers le nord, puis un autre nombre de pas vers la gauche.

Par exemple, avancer de 7 pas vers le nord peut être représenté comme suit :

for (let step = 0; step < 7; step++) {
      // S'exécute 7 fois, avec des valeurs de step de 0 à 6.
      console.log("Avance d'un pas vers le nord");
  }

L’exécution du bloc de code ci-dessus produira l’effet désiré.

Pourquoi utilise-t-on généralement des boucles ?

Exécuter des tâches répétitives : Les boucles permettent d’exécuter une série d’instructions jusqu’à ce que certaines conditions soient satisfaites.
Parcourir des objets ou des tableaux : Elles offrent la possibilité de naviguer à travers les propriétés d’un objet ou les éléments d’un tableau, permettant d’effectuer des actions spécifiques pour chaque propriété ou élément.
Filtrer des données : Les boucles facilitent le filtrage des données en fonction de conditions définies.

Les boucles en JavaScript se déclinent sous plusieurs formes : for, while, do...while, for...of et for...in. Examinons-les en détail et voyons comment chacune fonctionne.

La boucle for

Une boucle for se répète jusqu’à ce qu’une condition spécifiée devienne fausse. Elle est constituée de trois expressions facultatives, suivies d’un bloc de code.

for (initialisation; condition; expressionFinale) {
     // code
  }

L’expression d’initialisation est exécutée une seule fois, avant le démarrage de la boucle. Elle est généralement utilisée pour initialiser un ou plusieurs compteurs.
L’expression de condition est vérifiée avant chaque itération de la boucle. Si la condition est vraie, le bloc de code associé est exécuté. La boucle s’arrête lorsque la condition est fausse. Si l’expression est omise, elle est considérée comme étant toujours vraie.
L’expression finale est exécutée après chaque itération. Elle est souvent utilisée pour incrémenter un compteur.

Des accolades ({}) permettent de regrouper plusieurs instructions en un bloc exécutable. L’instruction break permet de quitter la boucle avant que la condition ne soit évaluée comme fausse.

Exemples de boucles for avec du code

Utilisation d’une boucle for pour l’itération :

for (let i = 0; i < 7; i++) {
      console.log(i);
  }

Dans ce code :

La variable i est initialisée à zéro (i=0).
La condition est que i doit être inférieur à 7 (i<7).
La boucle continue tant que la valeur de i est inférieure à 7.
Après chaque itération, la valeur de i est incrémentée de 1 (++1).

Utilisation de l’instruction break pour quitter la boucle avant que la condition ne soit fausse :

for (let i = 1; i < 11; i += 2) {
      if (i === 9) {
        break;
      }
      console.log('Nombre total de développeurs : ' + i);
  }

Ce code itère de 1 à 10 (i<11).
La variable i est initialisée à 1 (i=1).
La boucle s’exécute tant que i est inférieur à 11.
Après chaque itération, la valeur de i est augmentée de 2 (i += 2).

L’instruction if vérifie si la valeur de i est égale à 9. Si c’est le cas, l’instruction break est exécutée et la boucle se termine.

(image)

La boucle for…of

La boucle for...of parcourt les objets itérables, comme les Map, les Array, les Arguments et les Set. Elle exécute un hook d’itération personnalisé pour chaque valeur distincte de la propriété.

La structure de base de la boucle for...of est la suivante :

for (variable of objet)
    instruction

Exemples de la boucle for…of en action

Itération d’un tableau avec une boucle for...of :

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , "React"];
  for (let i of frontendLanguages) {
    console.log(i);
  }

Dans ce code :

Un tableau nommé frontendLanguages est déclaré.
Ce tableau contient les éléments : « HTML », « CSS », « JavaScript » et « React ».
La boucle for...of parcourt chaque élément de frontendLanguages.
À chaque itération, la variable i prend la valeur de l’élément courant, qui est affiché dans la console.

Itération d’un Set avec une boucle for...of :

const s = new Set();
  s.add(2);
  s.add("grey");
  for (let n of s) {
      console.log(n);
  }

Dans ce bloc de code :

Une variable s est déclarée et initialisée avec un nouveau Set.
Deux éléments sont ajoutés à l’aide de la méthode add().
La boucle for...of itère sur les éléments du Set.
La boucle assigne la valeur de l’élément courant à la variable n, puis affiche cette valeur dans la console.

Itération d’une Map avec une boucle for...of :

const m = new Map();
    m.set(4, "rabbit");
    m.set(6, "monkey");
    m.set(8, "elephant");
    m.set(10, "lion");
    m.set(12, "leopard");
    for (let n of m) {
        console.log(n);
    }

Dans ce bloc de code :

Un nouvel objet Map est créé à l’aide du constructeur Map().
Une variable m est déclarée.
Cinq paires clé-valeur sont ajoutées en utilisant la méthode set().
La boucle for...of itère sur les éléments de l’objet Map m.

La boucle for…in

La boucle for...in est utilisée pour parcourir les propriétés d’un objet. La structure de base d’une boucle for...in est la suivante :

for (property in object) {
     // code
  }

Elle permet d’itérer sur les tableaux et les objets de type tableau.

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
  for (const vegetable in shoppingList) {
    console.log(vegetable);
  }

Dans ce code :

Un objet JavaScript nommé shoppingList est défini.
La boucle for...in parcourt chaque propriété de shoppingList en utilisant l’opérateur in.
À chaque itération, la boucle assigne le nom de la propriété courante de shoppingList à la variable vegetable.

La boucle while

La boucle while évalue une condition. Si celle-ci est vraie, le bloc de code associé est exécuté. Si la condition est fausse, la boucle se termine et le code n’est pas exécuté.

Voici la structure de base d’une boucle while :

while (condition)
    Instruction

La condition doit être vérifiée avant l’exécution de l’instruction. Plusieurs instructions peuvent être exécutées en les regroupant avec {} ou avec un bloc d’instructions.

Exemple de boucle while en action

let n = 0;
    while (n < 9) {
      console.log(n);
      n++;
    }

Dans ce code :

La variable n est initialisée à zéro (n=0).
La boucle s’exécute tant que la valeur de n est inférieure à 9 (n<9).
La valeur de n est affichée dans la console, puis incrémentée de 1 après chaque itération (n++).
Le code cessera de s’exécuter lorsque n atteindra la valeur 8.

La boucle do…while

Une boucle do...while itère jusqu’à ce qu’une condition donnée soit fausse.

Voici la structure générale d’une instruction do...while :

do
    instruction
  while (condition);

L’instruction est exécutée une première fois, puis la condition est vérifiée. L’instruction sera répétée tant que la condition sera vraie. Si la condition est fausse, l’exécution s’arrête et le contrôle passe à l’instruction suivant la boucle do...while. Le code dans une boucle do...while est toujours exécuté au moins une fois, même si la condition est initialement évaluée à false.

Exemple de boucle do…while

let n = 0;
  do {
      n += 1;
      console.log(n);
  } while (n < 7);

Dans ce code :

La variable n est initialisée à 0 (n=0).
La boucle do...while démarre, incrémentant la valeur de n de 1 à chaque itération (n+=1).
La valeur de n est enregistrée à chaque itération.
La boucle continue tant que la valeur de n est inférieure à 7 (n<7).

Lorsque ce code est exécuté, la console affichera les valeurs de n de 1 à 7 car la boucle s’exécute 7 fois.

Boucle imbriquée

Une boucle imbriquée se produit lorsqu’une boucle est incluse à l’intérieur d’une autre boucle. Par exemple, une boucle for peut être imbriquée dans une autre boucle for.

for (let outer = 0; outer < 5; outer += 2) {
      for (let inner = 0; inner < 6; inner += 2) {
          console.log(`${outer}-${inner}`);
      }
  }

Deux variables, outer et inner, sont initialisées à zéro.
Chacune de ces variables est incrémentée de 2 après chaque itération.
Les boucles outer et inner itèrent trois fois chacune.

Instructions de contrôle de boucle

Les instructions de contrôle de boucle, aussi appelées « instructions de saut », interrompent le déroulement normal d’un programme. Les instructions break et continue en sont des exemples.

Instructions break

Les instructions break terminent une boucle immédiatement, même si la condition n’est pas encore remplie.

for (let n = 1; n <= 26; n++) {
        if (n === 13) {
            console.log("La boucle s'arrête ici. Nous avons atteint l'instruction break");
           break;
        }
        console.log(n);
    }

Le code affiché ressemblera à :

Instructions continue

Les instructions continue permettent d’ignorer un bloc de code et de passer à l’itération suivante de la boucle.

for (let n = 0; n <= 10; n++) {
        if (n === 5) {
            continue;
        }
        console.log(n);
    }

Le code affiché ressemblera à :

Conclusion

Vous trouverez ci-dessus les boucles les plus courantes rencontrées dans le JavaScript vanilla ainsi que ses frameworks/bibliothèques. Comme mentionné, chaque type de boucle a son cas d’utilisation et ses particularités. Choisir le mauvais type de boucle peut engendrer des bugs et un comportement inattendu de votre code.

Si vous travaillez avec un framework ou une bibliothèque JavaScript, référez-vous toujours à sa documentation et privilégiez les boucles intégrées.

0 Partages