L'instruction switch en JavaScript

Introduction à l'instruction switch

En JavaScript, l'instruction switch exécute l'un de plusieurs blocs de code selon la valeur d'une unique expression. Lorsque vous vous retrouvez à écrire une longue chaîne d'instructions if / else if qui comparent toutes la même variable à des valeurs différentes, un switch est généralement une façon plus claire et plus lisible d'exprimer la même logique.

Ce chapitre couvre la syntaxe complète, le fonctionnement conjoint de case, break et default, le fall-through intentionnel ou accidentel, la comparaison stricte (===) utilisée par switch, la façon de délimiter la portée des variables dans un case, et quand switch est — ou n'est pas — le bon choix.

Fonctionnement du switch

Un switch évalue son expression une seule fois, puis compare le résultat à chaque valeur de case de haut en bas avec une comparaison stricte (===). Le premier case correspondant devient le point d'entrée : l'exécution démarre là et continue à travers les instructions suivantes jusqu'à rencontrer un break, un return, ou la fin du switch. Si aucun case ne correspond, le bloc default optionnel s'exécute.

Syntaxe et structure de l'instruction switch

Le squelette d'une instruction switch ressemble à ceci :

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Quelques règles à retenir :

• L'expression est évaluée une seule fois, au début.
• Les étiquettes case doivent être suivies d'un deux-points (:), pas d'une accolade.
• break termine le switch ; sans lui, l'exécution tombe dans le case suivant (voir Fall-Through ci-dessous).
• default est optionnel et n'a pas à être en dernier, bien que le placer en dernier soit la convention.

Exemple de switch basique

Fall-Through : regroupement ou accident

Lorsqu'un case ne contient pas de break, l'exécution « tombe » dans le case suivant. Il s'agit d'un mécanisme unique aux deux résultats très différents — l'un utile, l'autre un bug classique.

Regroupement intentionnel (bon fall-through)

En empilant des étiquettes case vides, vous pouvez exécuter le même code pour plusieurs valeurs. C'est la façon idiomatique de gérer « toutes ces entrées doivent faire la même chose ».

Parce que 'apple' correspond à la première étiquette et que celle-ci n'a pas de corps, l'exécution passe dans le console.log('Red fruit') partagé, puis s'arrête au break.

Fall-Through accidentel (le bug)

Si vous oubliez un break, chaque case après la correspondance s'exécute également jusqu'au prochain break ou la fin du switch. Ici fruit vaut 'apple', pourtant les quatre lignes s'affichent :

Ajouter break; après chaque console.log limiterait la sortie à Apple is red. uniquement. La règle de base : terminer chaque case par break (ou return) sauf si vous regroupez délibérément des cases.

Portée de bloc dans un case

Toutes les clauses case partagent une seule portée de bloc — le corps du switch. Cela signifie qu'un let ou const déclaré dans un case est visible par les autres et peut provoquer une erreur « Cannot access before initialization ». Enveloppez le corps d'un case dans ses propres accolades { ... } pour lui donner une portée privée :

Sans les accolades, déclarer const result dans les deux cases provoquerait une erreur de syntaxe en raison de la déclaration dupliquée dans la portée partagée.

Comparaison stricte (===) dans switch

Le switch de JavaScript compare l'expression à chaque valeur de case avec l'égalité stricte (===) — aucune coercition de type n'a lieu. Ainsi, le type doit aussi correspondre, pas seulement la valeur. Pour en savoir plus sur la différence entre === et ==, consultez Opérateurs de comparaison.

Dans cet exemple, la string '0' ne correspond pas au nombre 0, donc le default s'exécute :

Si vous devez faire correspondre sans tenir compte du type, convertissez d'abord l'expression, par exemple switch (Number(x)).

switch vs. if/else

Les deux peuvent exprimer la même logique de branchement, alors choisissez en fonction de la forme de la condition :

• Préférez switch lorsque vous comparez une valeur à de nombreuses options discrètes et constantes (un code de statut, un nom de commande, un choix de menu). C'est lisible et l'intention est évidente.
• Préférez if / else if lorsque les conditions sont des plages ou des expressions booléennes (age >= 18, score > 90 && passed), impliquent des variables différentes, ou nécessitent une flexibilité que le === strict ne peut pas offrir.
• Pour associer une clé à une valeur unique, une recherche dans un objet ordinaire (const labels = { add: 'Addition' }) est souvent plus courte que l'un ou l'autre. Consultez Opérateurs logiques pour combiner des conditions dans le style if.

Conclusion

L'instruction switch en JavaScript est un outil polyvalent pour gérer plusieurs conditions. Comprendre son utilisation correcte et ses nuances peut grandement améliorer la lisibilité et l'efficacité de votre code.

Pratique