image auteur
Lucas BENTO-VERSACE 8min • 23-12-2021

Javascript - Les structures de contrôles

Javascript - Les structures de contrôles

Qu’est-ce qu’une structure de contrôle ? Et pourquoi les utiliser dans notre code ?

Définition

Une structure de contrôle en informatique est une instruction permettant de diriger le fil d'exécution d'un programme. Tous les langages de programmation les implémentent.

Les structures de contrôles se divisent en 2 familles :

  • les structures de test
  • les boucles

Dans cet article, vous allez découvrir comment on les utlise en JavaScript.

Les conditions

Les structures de condition nous permettent de faire éxécuter une instruction en fonction du résultat d'un test.

Condition if / else

L’instruction if est une structure de contrôle qui permet de tester des conditions.

Elle permet d'exécuter une série d'instructions si la condition est vérifiée.

Grâce au mot-clé else nous pouvons spécifier des instructions à exécuter dans le cas où la condition n’est pas vérifiée.

syntax structure of control
Syntaxe d'une instruction if / else

Exemples

1
2
3
4
5
6
7
8
9
10
const balance = 50;

// 50 est supérieur à 0 => la condition est vraie (truthy).
if (balance >= 0) {
  console.log("Le solde est positif");
} else {
  console.log("Le solde est négatif");
}

// Output : Le solde est positif
Le bloc "if" est déclenché
1
2
3
4
5
6
7
8
9
const balance = -100;

// -100 est inférieur à 0 => la condition est fausse (falsy).
if (balance >= 0) {
  console.log("Le solde est positif");
} else {
  console.log("Le solde est négatif");
}
// Output : Le solde est négatif
Le bloc "else" est déclenché

Switch / case

La structure de contrôle switch / case permet de faire plusieurs tests sur la même expression => gain de lisibilité et optimisation du code.

Cette instruction conditionnelle simplifie le test de plusieurs valeurs possibles pour une expression donnée, car cette opération aurait été plus verbeuse (mais faisable) avec des if / else imbriqués.

instruction switch case
Syntaxe d'une instruction switch / case

Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const city = "Berlin";

// Le switch évalue la valeur de "city"
switch(city) {
  case "Madrid":
    console.log("Spain is awesome !");
    break;
  // Le case "Berlin" correspond à la valeur de "city"
  case "Berlin":
    console.log("Germany is awesome !");
    break;
  case "Lisbon":
    console.log("Portugal is awesome !");
    break;
  default:
    console.log("This city is not awesome yet !");
}

// Output: Germany is awesome !
Le case "Berlin" est activé

Vous pouvez remarquer la présence d'un case nommé "default". Il est activé lorsqu'aucun autre case n'a matché avec la valeur de l'expression testée.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const city = "New York";

// Le switch évalue la valeur de "city"
switch(city) {
  case "Madrid":
    console.log("Spain is awesome !");
    break;
  case "Berlin":
    console.log("Germany is awesome !");
    break;
  case "Lisbon":
    console.log("Portugal is awesome !");
    break;
  // Aucun case ne correspond à la valeur de "city"
  default:
    console.log("This city is not awesome yet !");
}

// Output: This city is not awesome yet !
Le case "default" est activé

Le mot-clé break est impératif après l'instruction pour sortir du switch après l'exécution d'un case.

Les boucles

Les boucles nous permettent de faire répéter une instruction plusieurs fois, sans avoir à réécrire l'instruction à répéter.

Boucle while

L’instruction while permet de spécifier un bloc d’instructions qui sera répété tant que la condition est vérifiée.

Avant chaque exécution ou ré-exécution du bloc, la condition est évaluée. Tant qu'elle renvoie "true", le bloc est exécuté.

Attention : si la condition est toujours vérifiée, le bloc d’instructions sera exécuté de façon infinie, ce qui fera planter votre programme.

Exemple

1
2
3
4
5
6
7
8
9
10
11
12
13
// Initialise un compteur i à la valeur 0
let i = 0;

// Evalue la condition
// Exécute les instructions si la condition est vraie (truthy)
while(i < 3) {
  console.log("This is a loop");
  i = i + 1;
}

// Lorsque la condition devient fausse (falsy),
// le fil d'exécution quitte la boucle et continue
console.log("End of program");
while.js

Dans cet exemple, le bloc du while va s'exécuter 3 fois. Après ces 3 fois, i sera égal à 3 donc la condition devient fausse et le fil d'exécution quitte la boucle.

On verra donc en console :

1
2
3
4
This is a loop
This is a loop
This is a loop
End of program
Résultat de l'exécution

Boucle do-while

L’instruction do while se comporte comme la boucle while, sauf que la condition est vérifiée APRÈS l'exécution du bloc.

Exemple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Initialise un compteur i à la valeur 0
let i = 0;

// Execute les instructions
do {
  console.log("This is a loop");
  // Increments i
  i = i + 1;
}
while (i < 3); 
// Evalue la condition
// Ré-exécute les instructions si la condition est vraie (truthy)

// Lorsque la condition devient fausse (falsy), 
// le fil d'exécution quitte la boucle et continue
console.log("End of program");
do-while.js

Voici le résultat en console :

1
2
3
4
This is a loop
This is a loop
This is a loop
End of program
Résultat de l'exécution

On remarque que l'output est le même qu'avec le while montré précédemment.

La différence est qu'ici, "This is a loop" sera affiché au minimum 1 fois, peu importe la valeur initiale de i.

Boucle for

La boucle for est une alternative au while, qui a l'avantage d'être plus concise.

Elle permet de spécifier sur une même ligne séparée par des ";" :

  • l'initialisation du compteur
  • la condition d'arrêt (condition "tant que")
  • l'incrémentation du compteur

Exemple

1
2
3
4
5
6
7
8
9
10
// Initialise un compteur i à la valeur 0
// Evalue la condition
// Exécute les instructions si la condition est vraie (truthy)
for (let i = 0; i < 3; i++) {
  console.log("This is a loop");
}

// Lorsque la condition devient fausse (falsy), 
// le fil d'exécution quitte la boucle et continue
console.log("End of program");
Exemple d'utilisation d'une boucle for

Conclusion

Vous venez de découvrir les structures de contrôles en JavaScript. Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Et si vous avez réussi à tout suivre, vous pouvez passer au chapitre suivant : Les tableaux

Sources

Auteur

image auteur
Lucas BENTO-VERSACE Alternant chez Codewise / Étudiant en développement web lucas.bentoversace@ynov.com
"Alternant chez Codewise, passioné par l'informatique et les technologies depuis mon plus jeune âge. J'ai découvert le monde du web et depuis je ne m'en lasse pas ! Fan de jeux vidéos, de sports et de musiques. "