Les boucles sont très utiles en Javascript. Elles permettent de répéter ou d’itérer des instructions. Elles sont très souvent utilisées pour les traitements d’affichage : afficher une liste de produits, une liste de membres, une liste de commentaires dans les articles, une liste d’informations selon des critères de recherche, afficher une pagination…

Répéter un nombre de fois déterminé

Si le nombre de répétion (ou itération) est connu, utiliser la syntaxe for. Exemple :

for(let i=0 ; i<6 ; i++){
    document.write(i);
}

Affichage

012345

Description

Dans la parenthèse, vous devez fournir 3 informations séparéés par des point-virgules ;

1. déclaration d’une ou de plusieurs variables, ici la variable i fait office de compteur
2. conditions pour rester dans la boucle : i doit être inférieure à 6
3. instruction(s) sur retour : la valeur i est incrémentée

Boucle infinie

Même si cette pratique est déconseillée, il est possible de créer une boucle sans fin.

for( ;  ; ){
    document.write(2);
}

Dans ce cas la deuxième information n’étant pas définie, la boucle ne s’arrête jamais. Vous pouvez aussi obtenir le même résultat avec cette écriture.

for( ; true ; ){
    document.write(2);
}

Cela démontre que les informations entre les parenthèses ne sont pas obligatoires mais nécessaires au bon déroulement de l’itération.

Sortir d’une boucle

L’opérateur break permet de sortir d’une boucle.

for(let i=0 ; i<10 ; i++){
    if(i==3){
        break;
    }
    document.write(i);
}

Affichage

012

Dans cet exemple le 3 ne s’affichera pas puisqu’on quitte la boucle juste avant.

Passer immédiatement à l’itération suivante

Vous pouvez ignorer les instructions sur le retour avec l’instruction continue.

for(let i=1 ; i<10 ; i++){
    if(i==3){
        continue;
    }
    document.write(i);
}

Affichage

012456789

Dans cet exemple toutes les valeurs entre 1-9 seront affichées sauf le 3.

Répéter un nombre de fois indéterminé

Dans certaine situation, vous ne pouvez pas connaitre à l’avance le nombre total d’instructions à répéter, comme pour l’affichage des membres d’un site de rencontre. La boucle while est plus appropriée dans ce cas.

let i =0 ;
while (i <= 120) {
    document.write(i+"<br>"); 
    i = Math.round(Math.random()*200);
}

Affichage

12
100
5
105

Dans cet exemple, l’expression Math.random()*200 [random() est une méthode de l’objet Math()] permet de choisir un nombre aléatoire entre 0 et 200. La méthode round() de l’objet Math permet d’arrondir ce nombre.

La boucle while va donc afficher des nombres de façon aléatoire tant que ce dernier est inférieur ou égal à 120.