L’instruction `switch` en JavaScript est un outil de contrôle de flux conditionnel. Elle se révèle particulièrement pratique pour structurer des blocs conditionnels complexes comportant plusieurs alternatives.
Ce guide se propose de vous éclairer sur le fonctionnement et l’utilisation de l’instruction `switch`. Nous la comparerons également aux autres structures conditionnelles telles que les instructions `if` et les opérateurs ternaires, afin de déterminer les situations les plus appropriées pour chacune.
Qu’est-ce que l’instruction `switch` en JavaScript?
L’instruction `switch` en JavaScript sert à déterminer quel segment de code exécuter en fonction de la valeur d’une expression donnée. C’est l’une des principales méthodes de contrôle conditionnel disponibles en JavaScript.
Elle partage des points communs avec l’instruction `if` et l’opérateur ternaire, mais possède des particularités qui la rendent préférable dans certains cas. Nous allons explorer ces nuances dans cet article.
Comment utiliser l’instruction `switch` en JavaScript?
Dans cette section, nous allons examiner en détail l’instruction `switch`, en détaillant son fonctionnement et son application. Des exemples de code illustreront chaque concept, il sera donc utile d’avoir un compilateur JavaScript à disposition. Un compilateur en ligne tel que celui-ci est idéal pour cela. Vous pouvez également consulter notre guide des meilleurs IDE JavaScript en ligne.
Syntaxe générale
Voici la structure typique d’une instruction `switch` :
switch(<expression>) {
case <valeur 1>:
<instructions>
break;
case <valeur 2>:
<instructions>
break;
default:
<instructions>
}Le mot-clé `switch` marque le début du bloc `switch`. Entre parenthèses, on place une expression JavaScript. Une expression peut être n’importe quelle entité qui produit une valeur, par exemple, des littéraux (chaînes, nombres), des variables ou des appels de fonctions.
Le corps de l’instruction `switch`, délimité par des accolades, est composé de plusieurs cas. Chaque cas est associé à une valeur et à un ensemble d’instructions. Si la valeur de l’expression entre parenthèses correspond à la valeur d’un cas, les instructions de ce cas sont exécutées.
Le mot-clé `break` est facultatif à la fin de chaque cas. Lorsqu’il est présent, il interrompt l’exécution du bloc `switch`. S’il est absent, JavaScript poursuit l’exécution des cas suivants. C’est ce qu’on appelle le « fall through ». Sauf si vous souhaitez exploiter ce comportement, il est recommandé d’utiliser `break`.
Le dernier élément est le mot-clé `default`. Le cas `default` est exécuté si aucune des valeurs des cas précédents ne correspond à l’expression.
Exemples
Cette partie présentera divers exemples d’utilisation de l’instruction `switch`.
#1. Avec le « fall through »
L’exemple ci-dessous illustre l’utilisation de l’instruction `switch` sans le mot-clé `break`, ce qui permet de démontrer le phénomène de « fall through ».
Dans cet exemple, nous utilisons un code pour gérer différents codes d’état HTTP:
const statusCode = <insérer le code d'état ici>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirection');
case 403:
console.log('Interdit');
case 404:
console.log('Non trouvé');
case 500:
console.log('Erreur interne du serveur')
}Le code ci-dessus vérifie si une valeur correspond à un code d’état spécifique, puis affiche un message descriptif.
Observons ce qui se passe lorsque `statusCode` est défini sur 403.
Après avoir trouvé le cas correspondant (403), tous les cas suivants ont également été exécutés. C’est le principe du « fall through ». Ce comportement n’est généralement pas souhaitable, car on souhaite souvent exécuter un seul cas à la fois. Il est donc préférable d’utiliser le mot-clé `break` pour interrompre l’exécution.
#2. Sans le « fall through »
Pour empêcher le « fall through », on ajoute le mot-clé `break` à la fin de chaque cas. L’exemple suivant montre l’effet de cette modification:
const statusCode = <insérer un code d'état ici>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirection');
break;
case 403:
console.log('Interdit');
break;
case 404:
console.log('Non trouvé');
break;
case 500:
console.log('Erreur interne du serveur')
break;
}En exécutant ce code avec un code d’état de 403, on obtient:
Cette fois, le code n’exécute que le cas correspondant, évitant ainsi le « fall through ».
#3. Le « fall through » utile
Il est important de noter que le « fall through » peut être utile dans certains cas. Par exemple, si nous souhaitons déterminer si un personnage se déplace horizontalement ou verticalement en fonction d’une direction:
const direction = '<entrer la direction ici>'
switch(direction) {
case 'gauche':
case 'droite':
console.log('mouvement horizontal');
break;
case 'haut':
case 'bas':
console.log('mouvement horizontal');
break;
}Si la direction est définie sur ‘gauche’, le résultat est:
Et si la direction est ‘droite’, on obtient le même résultat:
En effet, lorsque le cas ‘gauche’ correspond, le code passe au cas ‘droite’, affichant « mouvement horizontal ». Ensuite, grâce au mot-clé `break`, l’exécution s’arrête, évitant le cas ‘haut’. Le même principe s’applique si la direction est ‘droite’.
Ainsi, le « fall through » permet de simuler une logique « OU » dans votre code.
#4. Correspondance de plages de valeurs
L’instruction `switch` vérifie l’égalité entre la valeur d’un cas et l’expression. Il est parfois nécessaire de vérifier si une valeur appartient à une plage donnée. Voici une solution pour gérer ce type de situation:
L’exemple suivant implémente un programme qui, en fonction d’une note, affiche la mention correspondante. Par exemple, si la note est supérieure à 90, le programme affiche « A+ », etc.
Pour cela, on utilise l’expression `true` entre parenthèses. La valeur de chaque cas est définie comme une opération logique qui sera vraie si la note correspond à la plage de ce cas. Par exemple, le dernier cas `mark >= 90` ne sera vrai que si la note est supérieure ou égale à 90. La correspondance est donc établie car `true` est égal à `true`.
const mark = <remplacer par une note>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}Si la note est 80, le résultat est:
Si la note est 95:
Et si la note est 45:
Portée lexicale
Les instructions à l’intérieur d’un cas n’ont pas de portée lexicale propre. Cela signifie que les variables définies dans un cas sont accessibles depuis un autre cas. Il est important d’en tenir compte lors de l’écriture de blocs `switch` où plusieurs cas peuvent être exécutés. L’exemple ci-dessous clarifie ce point:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}Dans ce code, les deux cas correspondent. Dans le premier, la variable `num` est définie; dans le second, sa valeur est affichée. Il n’y a pas d’erreur, comme le montre la capture d’écran ci-dessous:
Différences entre l’instruction `switch` et les autres structures conditionnelles
L’instruction `switch` est particulièrement adaptée lorsqu’il faut évaluer de nombreuses conditions. L’instruction `if` est préférable pour tester 2 ou 3 conditions. L’opérateur ternaire est utile pour exprimer un conditionnel sur une seule ligne.
Par souci de concision, il est conseillé de privilégier l’opérateur ternaire. Si la logique ne peut être exprimée par un opérateur ternaire, on peut alors opter pour une instruction `if`. Si ces deux approches ne sont pas adéquates, l’instruction `switch` est une solution appropriée.
Conclusion
Cet article a exploré l’instruction `switch`, son utilisation, ses particularités, et les contextes où elle est particulièrement utile.
Pour affiner votre maîtrise de JavaScript, nous vous conseillons de consulter ces aide-mémoire JavaScript.