Switch en JavaScript : case, break et fallthrough

L'instruction switch en JavaScript : choisir une branche parmi plusieurs

L'instruction switch en JavaScript est une structure de contrôle bien pratique quand il faut comparer une même valeur à plusieurs possibilités connues d'avance. On peut tout à fait obtenir le même résultat avec une enchaînement de if/else if/else, mais dès qu'on teste trois ou quatre fois la même variable, un switch rend le code nettement plus lisible.

Voici la forme de base :

Lu de haut en bas : JavaScript évalue day, le compare à chaque étiquette case, puis exécute le bloc qui correspond. default attrape tout ce qui n'a rien matché, un peu comme un else final. L'ordre de lecture, c'est valeur → case → code.

Comment fonctionne vraiment la comparaison

Le switch en JavaScript utilise une comparaison stricte — l'opérateur ===. Pas de conversion de type, pas de correspondance approximative. case 1: va matcher le nombre 1, mais pas la chaîne "1".

Seul le second case correspond. Si un jour votre switch refuse de se déclencher, le coupable habituel, c'est une valeur chaîne confondue avec un nombre, typiquement récupérée depuis un champ de formulaire ou un paramètre d'URL.

Le rôle clé de break dans le switch

C'est LA subtilité qui piège tout le monde. Une étiquette case est un point d'entrée, pas un bloc isolé. Dès que l'exécution tombe sur un case qui correspond, elle continue ligne par ligne — en traversant allègrement l'étiquette du case suivant — jusqu'à rencontrer un break, un return, ou la fin du switch.

Regardez ce qui se passe sans break :

La correspondance est "editor", et pourtant tu récupères peut modifier, peut consulter et connecté. C'est ce qu'on appelle le fallthrough : l'exécution a traversé chaque case suivant parce que rien ne lui a dit de s'arrêter.

Ajoute break et tout rentre dans l'ordre :

Réflexe à adopter : chaque case se termine par un break, sauf si tu veux délibérément du fallthrough.

Le fallthrough volontaire pour regrouper des cas

Le fallthrough n'est pas forcément un bug. Omettre break reste une manière élégante de dire « tous ces cas font la même chose » :

Les case vides empilés se partagent le bloc qui les suit. Remarque qu'il n'y a pas besoin de break après un return — la fonction se termine complètement. Un return à l'intérieur d'un switch saute tout ce qui viendrait ensuite.

En revanche, si tu veux vraiment un fallthrough entre des case non vides, laisse un commentaire pour que le prochain à relire le code ne le « corrige » pas par réflexe :

default n'est pas obligé d'être à la fin

Par convention, on place default tout en bas, et c'est là que la plupart des lecteurs s'attendent à le trouver. Mais techniquement, ce n'est qu'une étiquette comme les autres : elle se déclenche quand aucun case n'a matché, peu importe sa position. Si tu mets default au milieu sans break, l'exécution va continuer (fallthrough) sur ce qui suit. Garde-le à la fin, termine-le par un break (ou pas, puisqu'il n'y a plus rien derrière), et ton toi du futur te dira merci.

Portée des variables dans un case

Tous les case partagent une seule et même portée de bloc : celle du switch dans son ensemble. Du coup, si tu déclares un let ou un const avec le même nom dans deux case différents, tu te prends une erreur de redéclaration :

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

La solution : un bloc par case — il suffit d'entourer le corps avec { } :

Maintenant, chaque msg vit dans son propre scope et le conflit disparaît. À garder en tête dès qu'un case dépasse une ou deux lignes de logique.

switch vs if/else en JavaScript

Le switch en JavaScript brille quand on teste une seule valeur contre plusieurs options figées : codes HTTP, types d'action Redux, noms de commandes, chaînes qui font office d'énumération. La valeur apparaît une seule fois en haut, et l'œil parcourt les étiquettes case comme une table des matières.

Le if/else, lui, reste préférable dans ces cas-là :

• Tu compares des plages de valeurs (score >= 90, score >= 75).
• Les conditions portent sur des variables différentes ou des expressions booléennes.
• Tu veux de l'égalité faible ou des comparaisons sur mesure (switch utilise toujours ===).

Une alternative moderne courante au premier cas de figure est le lookup par objet :

Trois lignes au lieu d'un switch de neuf lignes. Quand tes case ne font que mapper des données sans vraie logique, un objet (ou une Map) se lit généralement mieux. Garde le switch pour les situations où chaque cas fait vraiment quelque chose.

La suite : les boucles for

Le switch permet de trancher entre plusieurs options à partir d'une seule décision. Le prochain élément du contrôle de flux, c'est la répétition — exécuter le même bloc de code encore et encore. C'est exactement le rôle des boucles for, qu'on voit juste après.