Branchement conditionnel en JavaScript

Cet article explique le branchement conditionnel en JavaScript.

YouTube Video

L'instruction if en JavaScript

Syntaxe de base

1if (condition) {
2    // Code that executes if the condition is true
3}

L'instruction if en JavaScript est une structure de contrôle de base utilisée pour gérer l'exécution du code selon qu'une condition spécifique est vraie ou fausse. Si la condition est vraie, le bloc de code est exécuté, et si elle est fausse, il est ignoré.

Exemple

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

Dans cet exemple, comme la valeur de x est supérieure à 5, x est supérieur à 5 est affiché dans la console.

Instruction else

Syntaxe de base

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

En utilisant une instruction else après une instruction if, vous pouvez spécifier le code à exécuter lorsque la condition est fausse.

Exemple

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

Dans ce cas, comme x est inférieur à 5, "x est inférieur ou égal à 5" est affiché.

Instruction else if

Syntaxe de base

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

Si vous souhaitez vérifier plusieurs conditions, utilisez else if. La condition suivante est vérifiée si la condition initiale if est fausse.

Exemple

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

Dans ce cas, comme x vaut 5, "x vaut 5" est affiché.

Opérateur ternaire (opérateur conditionnel)

Syntaxe

1condition ? valueIfTrue : valueIfFalse

Si vous souhaitez écrire une instruction if plus succinctement, vous pouvez utiliser l'opérateur ternaire.

Exemple

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

Dans ce cas, comme number est 7, Impair est affiché.

Résumé

• Les instructions if contrôlent quel code est exécuté selon que la condition est vraie ou fausse.
• Vous pouvez spécifier un comportement pour le cas où la condition est fausse en utilisant else.
• Vous pouvez vérifier plusieurs conditions en utilisant else if.
• Vous pouvez également utiliser un opérateur ternaire pour écrire des branches conditionnelles de manière concise.

L'instruction switch en JavaScript

Syntaxe de base

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

L'instruction switch en JavaScript est utilisée pour comparer une expression (généralement une variable) à plusieurs valeurs (cas) et exécuter le code correspondant. Comme l'instruction if, elle effectue un branchement conditionnel, mais elle est souvent plus lisible lorsqu'il y a plusieurs conditions.

Exemple

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

Dans cet exemple, puisque fruit est "apple", "This is an apple" est affiché dans la console.

break の役割

En insérant break à la fin de chaque cas, vous quittez l'instruction switch après avoir terminé ce cas. Si vous n'écrivez pas break, le cas suivant sera également exécuté (cela s'appelle fall-through).

Exemple de Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

Dans ce cas, puisque color est "red" et qu'il n'y a pas de break après "This is red", "This is blue" et "Unknown color" seront également affichés.

Utilisation de default

default est la partie qui est exécutée lorsqu'aucun case ne correspond. Cela correspond à else dans une instruction if.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

Dans ce cas, puisque animal est "dog", il relève de default, et "Unknown animal" est affiché.

Gérer plusieurs valeurs avec le même cas

Si vous souhaitez effectuer la même opération pour plusieurs cas, vous pouvez les écrire consécutivement.

Exemple

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

Dans cet exemple, si day est 1, "Weekday" est affiché.

switch vs. if

• Une instruction if est adaptée pour vérifier des conditions complexes ou des plages de valeurs. Par exemple, des conditions complexes telles qu'une variable x étant supérieure ou égale à 10 et inférieure ou égale à 20 ne peuvent pas être écrites dans un switch.
• Une instruction switch peut parfois rendre le code plus lisible lorsqu'il s'agit de vérifier si une valeur correspond à une valeur spécifique.

Résumé

• L'instruction switch est utilisée pour écrire des branches conditionnelles pour plusieurs valeurs de manière concise.
• Si vous n'utilisez pas break à la fin de chaque case, le case suivant peut également être exécuté (effet de cascade).
• default est exécuté lorsqu'aucun des cases ne correspond.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video