Les boucles

Les boucles
JavaScript

2 May 2021

Tout comme il est amené à prendre des décisions dans votre code avec des if, votre programme aura sûrement besoin de répéter des morceaux de codes. C'est ici que nous allons voir comment utiliser les boucles en JavaScript.

Les boucles ont pour seule mission de répéter un bout de code X fois. Pour quoi faire ?
La réponse sera : tout dépend de vos besoins ! Par exemple, vous utiliserez une boucle pour répéter un calcul plusieurs fois d'affilée ou encore pour lire un tableau.

Avant de détailler les différentes boucles disponibles, il faut bien comprendre qu'elles ont besoin d'éléments pour fonctionner correctement :

  • Un compteur
    Sans ça, comment saura-t-elle combien de fois elle doit boucler ? On initialisera une valeur.

  • Une condition de sortie
    C'est le critère le plus important ! À quel moment la boucle doit-elle s'arrêter ou combien de fois celle-ci doit-elle boucler ?

  • Un itérateur
    Son rôle est d'incrémenter le compteur de départ jusqu'à ce que la condition de sortie soit remplie.

Boucle "for()"

for(let i = 0; i < 10; i++) {
  /* Code à exécuter 10 fois */
}

Les trois composants cités plus haut sont intégrés au sein de la fonction for() et apparaissent dans l'ordre dans lequel ils ont été présentés.

Notre premier élément est notre compteur initialisé à zéro let i = 0. Le second élément est la condition de sortie ; dans notre cas, il s'agit de vérifier si la variable i est inférieure à 10. Si la condition est vraie, alors on continue de boucler, sinon on sort de la boucle. Enfin, le troisième élément est l'itérateur qui vient incrémenter notre compteur à chaque tour de boucle.

Voyons comment utiliser cette boucle pour lire un tableau JavaScript :

let list = ['Andy', 'Martin', 'Jasmine'];
let names = null;

for (let i = 0; i < list.length; i++) {
  names += list[i] + ' - ';
}

document.write(names);

/*
 * Résultat : Andy - Martin - Jasmine -
 */

Voyons un peu ce que fait ce bout de code.

Dans un premier temps, j'ai créé deux variables : l'une est un tableau contenant des prénoms et l'autre est une variable initialisée à null, qui contiendra à terme une chaîne de caractères.

Ensuite, j'initialise une boucle for() avec comme premier argument mon compteur qui démarre à zéro let i = 0 ; ensuite, je compare la valeur du compteur au nombre d'éléments contenus dans mon tableau avec la propriété length : i < list.length.

Enfin, on trouve l'itérateur qui viendra incrémenter mon compteur à chaque tour de boucle : i++ :

Au premier tour de boucle, i vaut 0 ; l'index du tableau commençant lui aussi à zéro, je peux extraire le premier élément de cette manière : list[i], ce qui équivaut à list[0].

Au second tour, i vaut maintenant 1, donc je peux extraire le second élément du tableau list[1], ...

Donc, tant que la valeur de i sera inférieure au nombre d'éléments contenus dans le tableau, la boucle ne s'arrêtera pas.

J'en profite pour ajouter chaque élément extrait de ce tableau à mon autre autre variable names, en concaténant le tout.

L'instruction "break"

Si, pour une raison vous souhaitez sortir de la boucle avant que toutes les conditions soient réunies, l'instruction break stoppera immédiatement celle-ci.

let list = ['Andy', 'Martin', 'Jasmine'];
let names = null;

for (let i = 0; i < list.length; i++) {
  if (list[i] === 'Andy') {
    names = list[i];
    break;
  }
}

document.write(names);

/*
 * Résultat : Andy
 */

J'ai repris le code précédent et j'ai ajouté une condition au sein de la boucle. Je vérifie si la valeur extraite de mon tableau est strictement égale à "Andy". Si oui, j'enregistre cette valeur dans ma variable names et je sors de la boucle grâce à l'instruction break.

L'instruction "continue"

let list = ['Andy', 'Martin', 'Jasmine'];
let names = null;

for (let i = 0; i < list.length; i++) {
  if (list[i] !== 'Martin') {
    continue;
  }

  names = list[i];
}

document.write(names);

/*
 * Résultat : Martin
 */

J'ai repris mon code précédent que j'ai légèrement modifié. Ma condition ne vérifie plus une stricte égalité, mais contrôle si la valeur extraite du tableau est différente de celle choisie, ici, "Martin".
Si la condition est vraie, on entre dans l'instruction if et on demande au code de passer à l'itération suivante sans se préoccuper du reste grâce à continue.

Boucle "while()"

Jetons maintenant un œil à un autre type de boucle : la boucle while().

Il est important de savoir qu'elle existe et de connaitre son fonctionnement, mais très clairement, ce n'est pas la plus utilisée.

let list = ['Andy', 'Martin', 'Jasmine'];
let names = null;
let i = 0;

while(i < list.length) {
  names += list[i] + ' - ';

  i++; /* <-- IMPORTANT !!! */
}

/*
 * Résultat : Andy - Martin - Jasmine -
 */

J'ai ici repris le premier exemple de la boucle for(), que j'ai adapté à la boucle while(). Comme vous pouvez le constater, on retrouve les trois éléments importants d'une boucle : le compteur, la condition de sortie et l'itérateur.

La disposition est bien différente. Là où la boucle for() a tous les éléments (compteur, condition de sortie et itérateur) qui sont passés en paramètres, la boucle while() prend seulement en charge la condition de sortie. Il faut donc initialiser le compteur avant celle-ci et ne pas oublier de placer l'itérateur dans la boucle, en dernière position.

Attention !

N'oubliez pas l'itérateur à la fin de la boucle while() ! En cas d'oubli, vous créez une boucle infinie !

Boucle "do... while()"

La boucle "do... while()" est très semblable à la boucle while() à une petite différence près : le code contenu dans cette boucle sera exécuté au moins une fois, même si la condition de sortie est remplie !

Il est important de savoir qu'elle existe et de connaitre son fonctionnement, mais très clairement, ce n'est pas la plus utilisée non plus.

let list = ['Andy', 'Martin', 'Jasmine'];
let names = null;
let i = 0;

do {
  names += list[i] + ' - ';

  i++; /* <-- IMPORTANT !!! */
}
while(i < list.length);

/*
 * Résultat : Andy - Martin - Jasmine -
 */

Attention !

N'oubliez pas l'itérateur à la fin de la boucle "do... while()" ! En cas d'oubli, vous créez une boucle infinie !

Boucle "forEach()"

forEach()prend en paramètre une fonction callback en lui passant chaque élément du tableau à chaque itération.

let list = ['Andy', 'Martin', 'Jasmine'];
list.forEach((item, index) => {
  console.log(item, index);
});

Attention ! Cette méthode utilise directement le tableau et non une copie de celui-ci. Donc si vous modifiez le tableau en cours de route, celui-ci en sera affecté et votre boucle aussi.

Vous pouvez utiliser aussi la méthode forEach()sans passer l'index dans la fonction callback :

list.forEach(item => console.log(item));

Cette méthode n'est pas conçue pour produire une valeur de retour, elle vous retournera undefined.