Mis à jour le 19/11/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Répétez des instructions

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'objectif de ce chapitre est d'apprendre comment ajouter à nos programmes des possibilités
d'exécution répétitive.

TL;DR

  • On utilise une boucle afin d'exécuter plusieurs fois un bloc d'instructions. Chaque exécution est appelée un tour de boucle ou encore une itération. Le bloc d'instructions associé à une boucle est appelé le corps de la boucle.

  • La boucle  while  permet de répéter des instructions tant qu'une condition est vérifiée. La boucle  for  ajoute la possibilité d'effectuer un traitement à l'entrée dans la boucle (initialisation) et après chaque tour de boucle (étape).

  • La variable utilisée dans l'initialisation, la condition et l'étape d'une boucle for est appelée le compteur de la boucle.

  • Il faut toujours que la condition d'une boucle  while  puisse devenir fausse afin d'éviter le risque d'une boucle infinie.

  • On s'interdit de manipuler le compteur d'une boucle  for  à l'intérieur du corps de la boucle.

  • Toutes les boucles peuvent s'écrire avec un  while. La boucle  for  est à privilégier lorsque le nombre d'itérations est connu à l'avance.

Introduction

Essayons d'écrire un programme qui affiche tous les nombres entre 1 et 5. Voici ce que nous pouvons écrire avec nos connaissances actuelles.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Même s'il reste relativement court, ce programme est très répétitif. Que se passerait-il si nous devions afficher non pas 5, mais 100 ou même 1000 nombres ? On doit pouvoir faire mieux !

Pour cela, le langage JavaScript offre la possibilité de répéter l'exécution d'un ensemble d'instructions en plaçant ces instructions à l'intérieur d'une boucle. Le nombre de répétitions peut être connu à l'avance ou dépendre de l'évaluation d'une condition. A chaque répétition, les instructions contenues dans la boucle sont exécutées. C'est ce qu'on appelle un tour de boucle ou encore une itération.

On se sent concerné(e) ?

Nous allons étudier les deux grands types de boucles utilisables en JavaScript ainsi que dans la plupart des autres langages de programmation.

La boucle while

La bouclewhile permet de répéter des instructions tant qu'une condition est vérifiée.

Exemple d'utilisation

Voici notre programme d'exemple réécrit avec une bouclewhile.

console.log("Début du programme");
let nombre = 1;
while (nombre <= 5) {
  console.log(nombre);
  nombre++;
}
console.log("Fin du programme");

Observez le fonctionnement de cet exemple dans l'éditeur ci-dessous.

C4-1

Fonctionnement

La syntaxe de l'instructionwhile est la suivante.

while (condition) {
  // instructions exécutées tant que la condition est vérifiée
}

Avant chaque tour de boucle, la condition associée auwhile est évaluée.

  • Si elle est vraie, les instructions du bloc de code associé auwhile sont exécutées. Ensuite, l'exécution revient au niveau du while et la condition est à nouveau vérifiée.

  • Si elle est fausse, les instructions du bloc ne sont pas exécutées et le programme continue juste après le blocwhile.

Le bloc d'instructions associé à une boucle est appelé le corps de la boucle.

La boucle for

On a fréquemment besoin d'écrire des boucles dont la condition est basée sur la valeur d'une variable qui est modifiée dans le corps de la boucle, comme dans notre exemple. Pour répondre à ce besoin, JavaScript et la plupart des autres langages disposent d'un autre type de boucle : le for.

Exemple d'utilisation

Voici notre programme d'exemple réécrit avec une bouclefor.

let compteur;
for (compteur = 1; compteur <= 5; compteur++) {
  console.log(compteur);
}

Testez cet exemple. Vous obtenez exactement le même résultat que précédemment.

C4-2

Fonctionnement

La syntaxe de l'instruction for est la suivante.

for (initialisation; condition; étape) {
    // instructions exécutées tant que la condition est vérifiée
}

Son fonctionnement est un peu plus complexe que celui d'unwhile. Lisez attentivement ce qui suit :

  • L'initialisation se produit une seule fois, au début de l'exécution.

  • La condition est évaluée avant chaque tour de boucle. Si elle est vraie, un nouveau tour de boucle est effectué. Sinon, la boucle est terminée.

  • L'étape  est réalisée après chaque tour de boucle.

Le plus souvent, on utilise l'initialisation pour définir la valeur initiale d'une variable qui sera impliquée dans la condition de la boucle. L'étape sert à modifier la valeur de cette variable.

Compteur de boucle

La variable utilisée dans l'initialisation, la condition et l'étape d'une boucle for est appelée le compteur de la boucle.

Très souvent,  on n'a pas besoin d'utiliser la variable compteur en dehors du corps de la boucle. Dans ce cas, on peut la déclarer en même temps qu'on l'initialise dans la boucle. Notre programme d'exemple peut être réécrit ainsi :

for (let i = 1; i <= 5; i++) {
    console.log(i); // OK
}
console.log(i); // Erreur : la variable i n'est pas visible ici

Erreurs fréquentes

Boucle while infinie

Le principal risque lié à la bouclewhile est la "boucle infinie". Il s'agit d'une erreur de programmation très facile à commettre, donc dangereuse.

Modifiez l'exemple de bouclewhile en oubliant volontairement la ligne qui incrémente la variablenombre.

let nombre = 1;
while (nombre <= 5) {
    console.log(nombre);
    // La variable n'est plus modifiée : la condition sera toujours vraie
}

Lors de l'exécution de ce programme, on effectue un premier tour de boucle puisque la conditionnombre <= 5 est initialement vérifiée. Mais comme on ne modifie plus la variablenombre dans le corps de la boucle, la condition est indéfiniment vraie : il s'agit d'une boucle infinie.

Manipulation du compteur d'une boucle for

Imaginons qu'un accès de folie temporaire vous conduise à modifier le compteur d'une bouclefor dans le corps de la boucle, comme dans l'exemple suivant.

for (let compteur = 1; compteur <= 5; compteur++) {
    console.log(compteur);
    compteur++; // La variable est modifiée dans le corps de la boucle
}

A chaque tour de boucle, la variablecompteur est incrémentée deux fois : dans le corps de la boucle, puis dans l'étape exécutée à la fin de chaque tour.

Choix entre un while et un for

Comment choisir le type de boucle à utiliser lorsqu'on doit répéter des instructions dans un programme ?

La bouclefor a l'avantage d'intégrer la modification du compteur dans sa syntaxe, ce qui élimine le problème des boucles infinies. En revanche, son utilisation implique que le nombre de tours de boucle soit connu à l'avance. Les scénarios où le nombre de tours ne peut pas être prévu à l'avance seront plus simples à écrire avec unwhile. C'est notamment le cas lorsque la boucle sert à contrôler une donnée saisie par l'utilisateur, comme dans cet exemple.

let lettre = "";
while (lettre !== "X") {
  lettre = prompt("Tapez une lettre ou X pour sortir : ");
}

Le nombre de tours de boucle dépend des valeurs saisies par l'utilisateur : il est imprévisible.

En conclusion, le choix entre unwhile et unfor dépend du contexte. Toutes les boucles peuvent s'écrire avec unwhile. Si on peut prévoir à l'avance le nombre de tours de boucles à effectuer, la bouclefor est le meilleur choix. Sinon, il vaut mieux utiliser lewhile.

A vous de jouer !

Voici venu le moment des exercices d'application. Les consignes habituelles s'appliquent : nommage des variables, indentation, test exhaustif pour trouver d'éventuelles erreurs.

Je vous conseille de réaliser chaque exercice avec le while, puis avec lefor. Cela vous entraînera et vous permettra de mieux juger par la suite du meilleur type de boucle à utiliser.

Tournez manège

C4-E1

Table de multiplication

C4-E2

FizzBuzz

C4-E3

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite