Instructions conditionnelles Javascript Switch...case - Letecode

Switch ... Case Javascript

Dernière mise à jour : 13/06/2022

Dans ce chapitre, vous apprendrez à utiliser l'instruction switch...case pour tester ou évaluer une expression avec différentes valeurs en JavaScript.

Utilisation de l'instruction Switch...Case

L'instruction switch..case est une alternative à l'instruction if...else if...else, qui fait presque la même chose. L' instruction switch...case teste une variable ou une expression par rapport à une série de valeurs jusqu'à ce qu'elle trouve une correspondance, puis exécute le bloc de code correspondant à cette correspondance. Sa syntaxe est :

 

switch (x){

    case value1 :

        // Code à exécuter si x === valeur1

        break ;

    case valeur2 :

        // Code à exécuter si x === valeur2

        break ;

    ...

    default :

        // Code à exécuter si x est différent de toutes les valeurs

}

Prenons l'exemple suivant, qui affiche le nom du jour de la semaine.

var d = new Date();
switch(d.getDay()) {
case 0:
alert("Today is Sunday.");
break;
case 1:
alert("Today is Monday.");
break;
case 2:
alert("Today is Tuesday.");
break;
case 3:
alert("Today is Wednesday.");
break;
case 4:
alert("Today is Thursday.");
break;
case 5:
alert("Today is Friday.");
break;
case 6:
alert("Today is Saturday.");
break;   
default:
alert("No information available for that day.");
break;
}

La méthode getDay() renvoie le jour de la semaine sous la forme d'un nombre compris entre 0 et 6, où 0 représente le dimanche. Consultez le chapitre sur la date et l'heure JavaScript pour en savoir plus sur les méthodes de date.

Remarque : Dans une instruction switch...case , la valeur de l'expression ou de la variable est comparée à la valeur case à l'aide de l'opérateur d'égalité stricte ( ===). Cela signifie que si x = "0", il ne correspond pas à case 0:, car leurs types de données ne sont pas égaux.

L' instruction switch...case diffère de l'instruction if...else d'une manière importante. L'instruction switch s'exécute ligne par ligne (c'est-à-dire instruction par instruction) et une fois que JavaScript trouve une clause évaluée à true, il exécute non seulement le code correspondant à cette clause case, mais exécute également toutes les clauses suivantes jusqu'à la fin du switch bloc automatiquement .

Pour éviter cela, vous devez inclure une déclaration break après chaque case(comme vous pouvez le voir dans l'exemple ci-dessus). L'instruction break indique à l'interpréteur JavaScript de sortir du bloc d'instructions switch...case une fois qu'il a exécuté le code associé au premier vrai cas.

L'instruction break n'est cependant pas requise pour la clause default, lorsqu'elle apparaît enfin dans une instruction switch. Cependant, c'est une bonne pratique de programmation de terminer la dernière clause, ou default dans une instruction switch avec un break. Cela évite une éventuelle erreur de programmation ultérieurement si une autre instruction case est ajoutée à l'instruction switch.

La clause default est facultative, qui spécifie les actions à effectuer si aucun cas correspond à l'expression switch. La clause default ne doit pas nécessairement être la dernière clause à apparaître dans une instruction switch. Voici un exemple, où default n'est pas la dernière clause.

 

var d = new Date();
switch(d.getDay()) {
    default: 
        alert("Looking forward to the weekend.");
        break;
    case 6:
        alert("Today is Saturday.");
        break; 
    case 0:
        alert("Today is Sunday.");
}

Plusieurs cas partageant la même action

Chaque valeur case doit être unique dans une instruction switch. Cependant, différents cas n'ont pas besoin d'avoir une action unique. Plusieurs cas peuvent partager la même action, comme illustré ici :

var d = new Date();
switch(d.getDay()) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        alert("C'est un jour de la semaine.");
        break; 
    case 0:
    case 6:
        alert("C'est le weekend");
        break;
    default: 
        alert("Enjoy every day of your life.");
}