Boucles en Javascript (For, For in, For of, For each et while)

Dec 10 2022

Article de base sur les boucles en Javascript. Concepts, types de cycles, comportements et exemples.

Boucles

Les boucles sont une fonctionnalité de programmation qui nous aide à exécuter une instruction de code de manière répétée ou à parcourir une structure de données, entre autres cas.

La plupart des boucles sont contrôlées par des variables et des conditions. Ces conditions nous aideront à avoir un meilleur contrôle sur la boucle et à éviter d'éventuelles boucles infinies (un facteur à considérer).

Comprendre les boucles

Pour mieux comprendre les cycles, on peut le voir dans l'organigramme suivant, où une expression sera évaluée et répétée plusieurs fois selon les critères établis.

Dans l'exemple, un nombre sera imprimé à l'écran, qui à son tour sera ajouté par l'unité à chaque itération, atteignant le nombre 100.

Notant que la plupart des boucles évaluent une condition qui doit être remplie pour exécuter l'instruction. Ces évaluations sont déclenchées par des booléens, où si la condition est vraie, elle exécute l'instruction et si elle est fausse, la boucle est fermée.

Déclarations de boucles

En Javascript, il existe plusieurs façons de définir une boucle, notant qu'au fil des années, de plus en plus de fonctionnalités ont été ajoutées autour d'elles.

Voici les différentes manières d'utiliser les boucles en Javascript :

pour.
pour en.
pour de.
pour chaque.
tandis que

Pour

La boucle « for » est une boucle qui répète un bloc de code en fonction de 3 expressions définies au moment de sa déclaration.

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

Expression 2 : Définit la condition pour exécuter le bloc de code. Si la condition est remplie, le bloc est exécuté, sinon le cycle est arrêté.
Expression 3 : s'exécute à chaque fois après l'exécution du bloc de code. Cette expression est couramment utilisée pour mettre à jour les variables définies dans l'expression 1.

for (let i = 1; i <= 5; i++) {
  console.log("the number is " + i);
}

// -- Result --
// the number is 1
// the number is 2
// the number is 3
// the number is 4
// the number is 5

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// -- Result --
// a: 1
// b: 2
// c: 3

La boucle "for of" est une boucle qui itère sur des types de données appartenant à la catégorie des itérables, tels que des objets, des tableaux ou des ensembles, en obtenant leur valeur.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// -- Result --
// 10
// 20
// 30

La boucle "pour chaque" est une boucle simplifiée exprimée de manière déclarative et fonctionnelle. Il fonctionne via des rappels et appartient à l'ensemble d'outils de tableau.

const array1 = ['a', 'b', 'c'];

array1.forEach(function(element){
  console.log(element);
});
// -- Result --
// "a"
// "b"
// "c"

La boucle "while" est une boucle qui itère tant qu'une condition est vraie.

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
// -- Result --
// 1
// 2
// 3
// 4
// 5

Les instructions « break » et « continue » sont des outils fournis par le langage pour interrompre ou continuer l'exécution d'une boucle. Ces phrases remplissent le rôle de support pour certains cas où l'on doit intervenir dans le cycle dans son exécution.

Casser

L'instruction "break" interrompt la boucle et termine son exécution.

let fruits = ["apple", "orange", "lemon"];
let fruitToSearch = "orange";

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  if (fruit === fruitToSearch) {
    console.log(`has been found the ${fruit}`);
    break;
  }
  console.log(`The fruit ${fruit} don't match with ${fruitToSearch}`)
}
// -- Result --
// The fruit apple don't match with orange
// has been found the orange

L'instruction "continue" ignore le code suivant dans la boucle, passant à l'itération suivante.

let fruits = ["apple", "orange", "lemon"];

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  console.log(`The fruit is ${fruit}`);
  continue;
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
}
// -- Result --
// The fruit is apple
// The fruit is orange
// The fruit is lemon

Il existe quelques recommandations pour utiliser différents types de cycles en fonction de la casuistique à traiter. Mais les recommandations générales peuvent être les suivantes :