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

0 Partages

JavaScript fait partie des langages de programmation les plus utilisés. Les développeurs qui souhaitent devenir ingénieurs JavaScript doivent apprendre les bases des boucles, leurs types et leur fonctionnement.

Une boucle JavaScript est un outil utilisé pour effectuer des tâches répétées en fonction d’une certaine condition. D’un autre côté, « itérer » est un terme générique, signifiant répéter dans le contexte de la boucle. Une boucle continuera à itérer jusqu’à ce qu’une condition d’arrêt soit remplie.

Pour mieux le comprendre, vous pouvez le considérer comme un jeu informatisé où il vous est demandé de faire X pas vers le nord, puis Y pas vers la gauche.

Vous pouvez représenter faire 7 pas vers le nord comme;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

lorsque le bloc de code ci-dessus est exécuté, vous aurez ceci ;

Table des matières

Pourquoi les boucles sont-elles généralement utilisées ?

Effectuer des tâches répétitives : vous pouvez utiliser des boucles pour exécuter des instructions jusqu’à ce que certaines conditions soient remplies.
Itérer sur des objets ou des tableaux : avec les boucles, vous pouvez parcourir les propriétés d’un objet ou des éléments d’un tableau, ce qui vous permet d’effectuer certaines actions pour chaque propriété ou élément.
Filtrer les données : vous pouvez utiliser une boucle pour filtrer les données en fonction de conditions spécifiques.

Les boucles JavaScript se présentent sous différentes formes ; Pour, pendant que, faire… pendant que, pour… de et pour… dans. Explorons-les en détail et montrons comment chacun fonctionne.

Pour la boucle

Une boucle for se répétera jusqu’à ce qu’une condition spécifiée soit vraie. Une boucle for a trois expressions facultatives, suivies d’un bloc de code.

for (initialization; condition; finalExpression) {

  // code

}

L’expression d’initialisation vient avant l’exécution de la première boucle. Cette expression initialise généralement un ou plusieurs compteurs.
Une expression de condition est vérifiée à chaque fois avant l’exécution de la boucle for. Le code de la boucle ou de l’instruction s’exécute chaque fois que l’expression prend la valeur true. D’autre part, la boucle s’arrête lorsque l’expression est évaluée à false. Cependant, si l’expression est omise, l’expression sera automatiquement évaluée à true.
Le finalExpression s’exécute après chaque itération de boucle. L’expression est principalement utilisée pour incrémenter un compteur.

Vous pouvez utiliser {}, instruction de bloc, pour regrouper et exécuter plusieurs instructions. Si vous souhaitez quitter la boucle avant que l’expression de condition ne soit évaluée comme fausse, utilisez l’instruction break.

Exemples de boucles for avec du code

Utilisez la boucle for pour itérer ;

for (let i = 0; i < 7; i++) {

  console.log(i);

}

Dans ce bloc de code ;

La variable i est initialisée à zéro (soit i=0).
La condition est que i doit être inférieur à 7 (i=7).
La boucle itérera à plusieurs reprises si la valeur de i est inférieure à 7 (i<7>.
L’itération ajoutera 1 à la valeur de i après chaque itération (++1).

Utilisez l’instruction break pour quitter la boucle avant que la condition ne soit évaluée comme fausse ;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

Le bloc de code itère de 1 à 10 (i<11).
La boucle initialise une variable i avec une valeur de 1 (soit i = 1).
La condition de boucle continuera à s’exécuter si la valeur de i est inférieure à 11 (i < 11).
La valeur de i augmente de 2 après chaque itération (i += 2).

L’instruction if évalue si la valeur de i=9. Si la condition est vraie, l’instruction break s’exécute et la boucle se termine.

(image)

Pour… de boucle

La boucle for…of itère sur des objets itérables tels que Map, Array, Arguments et Set. Cette boucle appelle un hook d’itération personnalisé avec des instructions qui s’exécutent pour la valeur de chaque propriété distincte.

La structure de base d’une boucle for… est la suivante ;

for (variable of object)

  statement

Exemples de boucle for…of en action

Boucle For…of itérant sur un tableau

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

Dans ce code;

Nous définissons un tableau nommé frontendLanguages
Le tableau a trois éléments ; « HTML », « CSS », « JavaScript » et « Réagir ».
La boucle for…of itère sur chaque élément de frontendLanguages.
Le i dans le bloc de code reprend la valeur de chaque élément à chaque itération et les valeurs imprimées sur la console.

Boucle For…of itérant sur un Set

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

Dans ce bloc de code;

Nous déclarons une variable s, que nous affectons à un nouveau Set en utilisant le constructeur Set().
Deux éléments sont ajoutés au code à l’aide de la méthode add()
Le for….of itère sur l’objet elements.
La boucle affecte l’élément actuel à n avant d’exécuter l’instruction console.log(n).

Boucle For…of itérant sur une carte

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 ;

Nous utilisons le constructeur Map() pour créer un nouvel objet Map.
Une variable m est déclarée.
En utilisant la méthode .set(), nous ajoutons cinq paires clé-valeur.
Une boucle for…of itère sur les éléments de l’objet Map m.

Pour… en boucle

Une 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 ;

for (property in object) {

  // code

}

Vous pouvez utiliser la boucle for…in pour itérer sur des tableaux et des 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 bloc de code ;

Nous introduisons un objet JavaScript et le nommons shoppingList.
Nous utilisons la boucle for pour itérer sur chaque propriété de shoppingList à l’aide de l’opérateur in.
À chaque itération, la boucle attribue le nom de la propriété actuelle dans shoppingList.

Alors que

La boucle while évalue une condition, si elle la trouve vraie, le bloc de code s’exécute. Cependant, si la condition est fausse, la boucle se termine et le bloc de code ne sera pas exécuté.

C’est la structure de base d’une boucle while ;

while (condition)

    Statement

La condition de test doit se produire avant l’exécution de l’instruction dans la boucle. Vous pouvez exécuter plusieurs instructions à l’aide de {} ou de blocs d’instructions.

Exemple de boucle while en action

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

Dans ce code;

Une variable n est initialisée avec une valeur nulle (soit n=0).
La boucle s’exécutera tant que la valeur de n est inférieure à 9 (n<9)
La valeur de n est affichée sur la console et augmentée de 1 après chaque itération (n++)
Le code cessera de s’exécuter à 8.

Faire … pendant la boucle

Une boucle do…while itère jusqu’à ce qu’une condition spécifique soit fausse.

La structure générale d’une instruction do…while est la suivante ;

do

  statement

while (condition);

L’instruction est exécutée une fois mais avant de vérifier la condition. L’instruction s’exécutera si la condition est vraie. Cependant, si la condition évaluée est fausse, l’exécution s’arrête et le contrôle passe à l’instruction après le do..while. Le code dans une boucle do…while est garanti pour s’exécuter au moins une fois, même si la condition est évaluée à true.

Exemple de faire… tant que

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

Dans ce code;

Nous introduisons une variable n et fixons sa valeur initiale à 0 (soit n=0).
Notre variable n entre dans une boucle do…while où sa valeur est incrémentée de 1 après chaque itération (n+=1)
La valeur de n est enregistrée.
La boucle continuera à s’exécuter tant que la valeur de n est inférieure à 7 (n<7).

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

Boucle imbriquée

Une boucle imbriquée est une situation dans laquelle nous avons une boucle à l’intérieur d’une boucle. Par exemple, nous pouvons avoir une boucle for 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}`);

  }

}

Il y a deux variables ; externe et interne et les deux sont initialisés avec la valeur zéro.
Les deux variables sont incrémentées de 2 après chaque itération
Les boucles externe et interne itèrent trois fois chacune.

Instructions de contrôle de boucle

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

Déclarations de rupture

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

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

Le code rendu apparaîtra comme;

Continuer les déclarations

Les instructions continues sont utilisées pour ignorer un certain bloc de code et effectuer une itération pour la nouvelle boucle.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Le code rendu apparaîtra comme;

Conclusion

Vous trouverez ci-dessus les boucles courantes que vous rencontrerez dans le JavaScript vanille et ses frameworks/bibliothèques. Comme souligné, chaque type de boucle a son cas d’utilisation et ses différents comportements. Si vous choisissez le mauvais type de boucle, vous aurez probablement des bogues et votre code affichera probablement un comportement inattendu.

Si vous avez affaire à un framework ou à une bibliothèque JavaScript, vérifiez toujours sa documentation et utilisez les boucles intégrées.