Logo du site. Represente un escaler en ombre.

Les boucles


En JavaScript, il est souvent très utile de pouvoir répéter plusieurs fois une instruction. Cela peut être pour parcourir un tableau de valeur, stocker un certain nombre de variables ou tout simplement pour afficher des éléments selon une certaine logique.
Pour ce faire, nous allons utiliser "les boucles". Le principe est simple: tant qu'une condition reste vraie, on répète l'instruction. Cela implique qu'à un moment ou a un autre, cette condition ne sera plus vrai, sans quoi, nous ne sortons jamais de la boucle, ce qui pose un réel problème pour le navigateur (boucle infinie).

Il existe plusieurs syntaxes pour l'écriture de boucles. Dans notre cas, nous allons en parcourir deux:

  • Les boucles "for"
    Très pratique pour éviter d'oublier un argument nécessaire au bon fonctionnement de la boucle. Elle est très utilisée lorsque le nombre d'itérations est connu ou clairement identifiable (par exemple, la taille d'un tableau).
  • Les boucles "while"
    Les boucles "while" sont utilisées lorsque le nombre d'itération ne sont pas forcément connu à l'avance. Elles ont la particularité d'être plus "maléable" en terme d'utilisations et de définition et utilisation des arguments nécessaire à leurs bons fonctionnement.

for ( … ) { … }

La syntaxe d'une boucle "for" est la suivante:

for ( déclaration de l'index ; conditions ; itération de l'index ) { block d'instructions }

On voit donc la simplicité d'utilisation de par la logique de la syntaxe. Les arguments se retrouvent entre parenthèses alors que le bloc d'instructions est entre accolades. Il n'y a donc pas de mélange entre les deux parties du code. L'oublie ou la problématique est elle aussi relativement rapidement déterminée.

  • Déclaration de l'index
    La déclaration de l'index qui va nous servir de "compteur" pour le nombre d'itérations de notre boucle (nombre de fois où le bloc de code va être appelé)
  • Conditions
    Ici on retrouve la ou les conditions du fonctionnement de la boucle. On dira souvent "tant que ceci est vrai, alors continue…".
  • Itération de l'index
    Ici, c'est l'argument qui met à jour notre index. On va, soit l'augmenter, soit le diminuer. Le but étant de faire en sorte qu'à un moment ou à un autre, la condition ne soit plus remplie et que notre boucle s'arrête
  • Bloc d'instructions
    C'est le code qui va s'exécuter lorsque la condition de la boucle est respectée. Ces instructions seront appelées autant de fois que nécessaire selon la ou les conditions.

Exemple:
Admettons que je veuille créer un certain nombre de répétitions dans la pratique d'un exercice physique. Je pourrais vouloir faire 10 pompes. Mon code sera donc le suivant:

for ( let index = 1 ; index <=10 ; index++ ) {
  console.log("pompe n° " + index);
}

Dans la console de votre navigateur, vous pourrez voir:

pompe n° 1
pompe n° 2
…
pompe n° 10

while ( … ) { … }

La syntaxe d'une boucle while est la suivante

while ( conditions ) { bloc d'instructions }

On remarque que la boucle while comprend moins d'arguments que la boucle for. C'est vrai dans les faits, mais pas dans l'idée. L'index, et l'itération de l'index sont tout de même nécessaires. La seule différence, c'est le fait qu'ils ne font pas partie intégrante de la déclaration de la boucle. Ils seront présents, mais leur placement est donné par le développeur.

En règle générale, l'index est repris d'une valeur précédemment définie ou définie par l'utilisateur avant la boucle. Son itération se fait à l'intérieur du bloc d'instructions, ce qui est parfois contre-intuitif. C'est pourtant ce qui fait sa force, car cette valeur peut être manipulée différemment selon les besoins.

Exemple:

Dans cet exemple, j'aimerai proposer à l'utilisateur de rentrer le nombre d'exercices qu'il aimerait faire.

const exercice = prompt("nom de l'exercice");
const compteur = Number(prompt("nombre d'itération de l'exercice));

while (compteur > 0) {
  console.log("Plus que " + compteur + " " + exercice);
}

J'aurai donc dans la console quelque chose de ce genre:

Plus que 4 squats
Plus que 3 squats
Plus que 2 squats
…

En résumé

Il n'y a pas vraiment de bonne ou de mauvaise boucle. Par simplicité, on utilisera fréquemment la boucle for. La boucle while sera sans doute présente lorsque nos arguments sont moins stricts. Mais rien n'empêche d'utiliser plutôt l'une que l'autre.

arrow-up-circle