Structures itératives

Comme les autres langages, Javascript offre des structures itératives.

Une structure itérative est une instruction permettant d'exécuter une (ou plusieurs) instruction(s) un certain nombre de fois (dit itération).

La structure itérative "for"

L'écriture de cette instruction "for" est la suivante :

for (var i = 1; i <= 5; i++) {
   // Instructions à exécuter.
}

On constate qu'elle a besoin de 3 éléments séparés par le signe ";" :

  1. une instruction d'initialisation (ci-dessus : var i = 0) ;
  2. une condition (ci-dessus : i <= 5) ;
  3. une instruction de fin d'itération (ci-dessus : i++).

En reprenant le premier exemple précédemment donné :

  1. lors de l'initialisation de la structure, la variable "i" est déclarée et valorisée à 1 ;
  2. la condition "i <= 5" est remplie : 1 est inférieur à 5 ;
  3. le bloc d'instructions de la structure est exécuté ;
  4. la fin de cette exécution du bloc marque l'exécution de l'instruction de fin d'itération ;
  5. la variable "i" est incrémentée (i++) : "i" vaut désormais 2 ;
  6. la condition est une nouvelle fois remplie : 2 est inférieur à 5 ;
  7. le bloc d'instructions est une nouvelle fois exécuté (cela tant que "i" ne sera pas supérieur à 5).

A noter, qu'il est possible d'effectuer plusieurs traitements aussi bien lors de l'initialisation que lors de la fin d'itération. Pour cela, on sépare chaque traitement par le signe "," :

for (var i = 1, var j = 1; i <= 5; i++, j++) {
   // Instructions à exécuter.
}

Dans l'exemple ci-dessus :

  1. lors de l'initialisation, les deux variables "i" et "j" sont déclarées et valorisées ;
  2. lors de la fin d'itération, les deux variables "i" et "j" sont incrémentées.

La structure itérative "while"

L'écriture de cette instruction "while" est la suivante :

var i = 1;
var condition = true;
while (condition) {
   if (i > 6) {
      condition = false;
   }
   i++;
}

Cette instruction s'appuie sur une condition pour définir si le bloc d'instructions associé doit être ré-exécuté ou non : tant que la condition est remplie, le bloc d'instructions est exécuté.

Dans l'exemple ci-dessus :

  1. la variable "i" est déclarée et valorisée à 1 ;
  2. la variable "condition" est déclarée et valorisée par true (valeur booléenne) ;
  3. le bloc d'instructions du "while" est exécuté (la condition est remplie) ;
  4. la condition du "if" n'est pas remplie ;
  5. "i" est incrémenté et vaut désormais 2 ;
  6. le bloc d'instructions du "while" est de nouveau exécuté 4 fois ;
  7. "i" vaut désormais 6 ;
  8. le bloc d'instructions du "while" est de nouveau exécuté ;
  9. la condition du "if" est remplie ;
  10. "condition" est valorisée par false ;
  11. "i" est de nouveau incrémenté pour atteindre 7 ;
  12. le bloc d'instructions du "while" n'est plus exécuté (la condition n'est plus remplie) ;
  13. la suite du script est exécutée.

La structure itérative "do while"

L'écriture de cette instruction "do while" est la suivante :

var i = 10;
do {
   // Instructions à exécuter.
}
while (i != 10);

Cette structure suit la même approche que le "while" à ceci près que le bloc d'instructions associé est exécuté au moins une fois (même si la condition est fausse).

Dans l'exemple ci-dessus :

  1. la variable "i" est déclarée et valorisée à 10 ;
  2. le bloc d'instruction suivant le nom réservé "do" est exécuté ;
  3. la condition du "while" est fausse : "i" n'est pas différente de 10 ;
  4. le bloc d'instructions du "do" n'est pas ré-exécuté ;
  5. la suite du script est exécutée.

Les structures itératives "while" et "do while" doivent faire l'objet d'une attention toute particulière. Le bloc d'instructions associé doit obligatoirement contenir des instructions permettant de rendre la condition fausse et ainsi de quitter l'exécution de la structure.

Sans la présence de ces instructions, le bloc d'instructions sera exécuté sans interruption jusqu'à provoquer le plantage du navigateur dans le pire des cas. On parle alors de "boucle infinie".

Passer explicitement à l'itération suivante de la structure

Il est possible, au sein du bloc d'instructions de la structure itérative, de forcer le passage à l'itération suivante avec le nom réservé "continue" :

var resultat = 0;
for (var i = 1; i <= 5; i++) {
   if (i == 2) {
      continue;
   }
   resultat += i;
}

Dans l'exemple ci-dessus :

  1. la variable "resultat" est déclarée et valorisée à 0 ;
  2. lors de l'initialisation de la structure, la variable "i" est déclarée et valorisée à 1 ;
  3. la condition est remplie ("i" (1) est inférieur à 5) : le bloc d'instructions est exécuté ;
  4. la condition du "if" n'est pas remplie : "i" (1) n'est pas égale à 2 ;
  5. la variable "resultat" se voit ajouter à sa valeur actuelle la valeur de "i" et vaut alors 1 (0 + 1) ;
  6. la fin de cette exécution du bloc marque l'exécution de l'instruction de fin d'itération ;
  7. "i" vaut désormais 2 ;
  8. la condition est une nouvelle fois remplie ("i" (2) est inférieur à 5) ;
  9. le bloc d'instructions est exécuté ;
  10. la condition du "if" est remplie : "i" est égale à 2 ;
  11. l'instruction "continue" provoque la fin d'exécution du bloc d'instructions ;
  12. l'instruction de fin d'itération est alors exécutée ;
  13. "i" vaut désormais 3 et la condition est toujours remplie ;
  14. la condition du "if" ne sera plus jamais remplie ;
  15. à la fin d'exécution de la structure, la variable "resultat" sera alors égale à 13 (1 + 3 + 4 + 5).

Quitter explicitement l'exécution de la structure

Nous avons pu le découvrir avec la structure conditionnelle "switch", le nom réservé "break" permet de quitter explicitement l'exécution d'une structure :

for (var i = 1; i <= 5; i++) {
   if (i > 3) {
      break;
   }
}
var resultat = i;

Dans l'exemple ci-dessus :

  1. lors de l'initialisation de la structure, la variable "i" est déclarée et valorisée à 1 ;
  2. la condition est remplie ("i" (1) est inférieur à 5) : le bloc d'instructions est exécuté ;
  3. la condition du "if" n'est pas remplie : "i" (1) n'est pas supérieure à 3 ;
  4. l'instruction de fin d'itération est alors exécutée ;
  5. "i" vaut alors 2 ;
  6. la condition du "if" n'est pas remplie : "i" (2) n'est pas supérieure à 3 ;
  7. l'instruction de fin d'itération est alors exécutée ;
  8. "i" vaut alors 3 ;
  9. la condition du "if" n'est pas remplie : "i" (3) n'est pas supérieure à 3 ;
  10. l'instruction de fin d'itération est alors exécutée ;
  11. "i" vaut alors 4 ;
  12. la condition du "if" est remplie : "i" (4) est supérieure à 3 ;
  13. l'instruction "break" provoque la fin d'exécution de la structure ;
  14. la variable "resultat" est déclarée et valorisée par la valeur de i ;
  15. "resultat" vaut 4.