Chaque type de boucle JavaScript expliqué : [Avec des blocs de code et des exemples]

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 take 7 steps northwards 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 ;

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 ; For, While, Do...While, For...of et For...in. Explorons-les en détail et montrons comment chacun fonctionne.

`For` loop

A for boucle 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

}

Les initialization L'expression vient avant l'exécution de la première boucle. Cette expression initialise généralement un ou plusieurs compteurs.
A condition expression est vérifiée à chaque fois avant la for la boucle s'exécute. 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.
Les 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.

Des exemples de `for` boucles avec code

Utilisez for boucle vers iterate;

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 break instruction 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érieur à 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, le break l'instruction s'exécute et la boucle se termine.

(image)

`For…of` loop

Les for…of boucle 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'un for…loop est;

for (variable of object)

  statement

Des exemples de `for…of` boucle en action

For…of boucle itérant sur un array

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

for (let i of frontendLanguages) {

  console.log(i);

}

Dans ce code;

On définit un tableau nommé frontendLanguages
Le tableau a trois éléments ; "HTML", "CSS", "JavaScript" and “React”.
Les for…of loop itère sur chaque élément dans frontendLanguages.
Les i dans le bloc de code reprend la valeur de chaque élément à chaque itération et les valeurs imprimées sur la console.

For…of boucle 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;

On déclare une variable s, que nous attribuons à un new Set en utilisant le constructeur Set().
Deux éléments sont ajoutés au code à l'aide de la méthode add()
Les for….of itère sur l'objet elements.
La boucle affecte l'élément courant à n avant d'exécuter console.log(n) déclaration.

For…of boucle itérant sur un Map

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 Map() constructeur pour créer un nouvel objet Map.
Une variable m est déclaré.
En utilisant .set() méthode, nous ajoutons cinq paires clé-valeur.
A for…of loop itère sur les éléments de l'objet Map m.

`For…in` loop

A for…in loop est utilisé pour parcourir les propriétés d'un objet. La structure de base d'un for…in boucle est ;

for (property in object) {

  // code

}

Vous pouvez utiliser for…in boucle pour parcourir arrays et array-like objects.

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 parcourir chaque propriété sur le shoppingList en utilisant l'opérateur in.
A chaque itération, la boucle affecte le nom de la propriété courante dans le shoppingList.

While

Les while boucle évalue un condition, s'il trouve que c'est true, le bloc de code s'exécute. Cependant, si le condition is false, la boucle se termine et le bloc de code ne sera pas exécuté.

C'est la structure de base d'un while boucle;

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 `while` boucle en action

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

Dans ce code;

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

`Do … While` Loop

A do…while boucle itère jusqu'à ce qu'une condition spécifique évalue à false.

La structure générale d'un do…while déclaration est ;

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 le condition is true. Cependant, si l'évalué condition is false, l'exécution s'arrête et le contrôle passe à l'instruction après la do..while. Coder dans un do…while boucle est garantie de s'exécuter au moins une fois, même si la condition est évaluée à true.

Exemple de `do…while`

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

Dans ce code;

Nous introduisons une variable n et définissez sa valeur initiale sur 0 (soit n = 0).
Notre variables 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 connecté.
La boucle continuera à s'exécuter tant que la valeur de n est inférieur à 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.

Nested Loop

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 ; outer et inner 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 outer et inner les boucles itèrent trois fois chacune.

Loop control statements

Loop control Les instructions de saut, 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

Break Les instructions 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

Continue Les instructions 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 JavaScript ou bibliothèque, vérifiez toujours sa documentation et utilisez les boucles intégrées.