Maîtriser la déclaration de commutateur JavaScript —

L’instruction JavaScript switch est un moyen de prendre des décisions dans votre code en fonction de différentes conditions. C’est une alternative plus organisée et concise à l’utilisation de plusieurs instructions if-else. L’instruction switch évalue une expression donnée, qui peut être une variable ou une valeur, et la compare à plusieurs cas possibles. Si la valeur de l’expression correspond à l’un des cas, le bloc de code associé (un ensemble d’instructions) est exécuté. Si aucune correspondance n’est trouvée, un cas par défaut facultatif peut être exécuté en tant que solution de secours, ce qui signifie qu’il s’exécute lorsqu’aucun des autres cas ne s’applique.

Par exemple, voici une simple instruction switch qui vérifie la valeur d’une variable appelée day:

switch (day) {
  case "Monday":
    console.log("Start of the work week! 😴");
    break;
  case "Friday":
    console.log("End of the work week! 🥳");
    break;
  default:
    console.log("A regular day");
}

En maîtrisant les instructions switch, vous pouvez écrire du code JavaScript plus propre, plus efficace et mieux organisé, améliorant ainsi vos compétences globales en programmation.

switch Principes de base de l’énoncé : anatomie et structure

les instructions switch commencent par le mot-clé switch, suivi d’une expression entre parenthèses. Cette expression est comparée à une série d’étiquettes de cas incluses dans un bloc de commutation. Chaque étiquette de cas représente une valeur distincte et le bloc de code qui suit le cas est exécuté lorsque l’expression correspond à la valeur de l’étiquette de cas. UN break L’instruction est généralement utilisée pour quitter le bloc de commutation après l’exécution d’un cas correspondant, garantissant que seul le bloc de code prévu s’exécute et empêchant le basculement vers les cas suivants. En option, un cas par défaut peut être inclus pour fournir une action de secours lorsqu’aucune des étiquettes de cas ne correspond à l’expression, garantissant une réponse pour les valeurs inconnues.

switch(expression) {
    case {value1}:
    
    break    
    case {value2}:
    
    break    
    default: 
    
}

const superhero = 'Spider-Man';
switch (superhero) { 
  case 'Batman':
    console.log('🦇 The Dark Knight!');
    break;
  case 'Wonder Woman':
    console.log('👸 The Amazon Princess!');
    break;
  default:
    console.log('💥 There are so many amazing superheroes!');
}

switch vs if-else

L’instruction switch est une alternative à l’utilisation d’instructions if-else lorsque vous avez plusieurs conditions à gérer. Alors que les instructions if-else conviennent à la vérification d’une série de conditions qui peuvent être exprimées comme vraies ou fausses, les instructions switch sont plus efficaces lorsqu’il s’agit d’une seule expression qui peut prendre plusieurs valeurs distinctes. Essentiellement, les instructions switch peuvent rendre votre code plus propre, plus organisé et plus facile à lire lorsque vous avez plusieurs conditions connexes à gérer.

Par exemple, considérez la structure if-else suivante :

if (color === "red") {
  console.log("The color is red 🟥");
} else if (color === "blue") {
  console.log("The color is blue 🟦");
} else if (color === "green") {
  console.log("The color is green 🟩");
} else {
  console.log("Unknown color 🌈");
}

L’instruction switch équivalente ressemblerait à ceci :

switch (color) {
  case "red":
    console.log("The color is red 🟥");
    break;
  case "blue":
    console.log("The color is blue 🟦");
    break;
  case "green":
    console.log("The color is green 🟩");
    break;
  default:
    console.log("Unknown color 🌈");
}

L’instruction switch offre un moyen plus organisé et plus lisible de gérer plusieurs conditions, en particulier lorsqu’il s’agit d’un grand nombre de cas. Dans une instruction switch, l’expression évaluée est la variable ou la valeur entre parenthèses (dans cet exemple, la variable color).

Quand utiliser switch sur if-else

1. Grand nombre de conditions à variable unique : Lorsque vous avez un grand nombre de conditions à gérer, les instructions switch sont généralement plus organisées et plus faciles à lire que les chaînes if-else.
2. Évaluation à variable unique : Si les conditions que vous évaluez sont basées sur une seule variable ou expression avec plusieurs valeurs distinctes, les instructions switch peuvent fournir une solution plus efficace et plus propre que les modèles if-else.
3. Exécution de code plus rapide : Dans certaines situations, les moteurs JavaScript peuvent optimiser les instructions switch, ce qui accélère l’exécution du code par rapport à une série d’instructions if-else.
4. Entretien plus facile : Les instructions switch facilitent l’ajout, la suppression ou la modification de cas, car chaque cas est autonome dans le bloc switch. En revanche, les chaînes if-else peuvent nécessiter des modifications plus importantes lorsque des changements sont nécessaires.
5. Repli par défaut : Les instructions switch fournissent un cas par défaut facultatif qui peut être exécuté lorsqu’aucun des autres cas ne correspond à l’expression donnée. Cette fonctionnalité permet de gérer proprement les valeurs inattendues ou inconnues.

Quand utiliser if-else sur switch

1. Conditions complexes : Si les conditions que vous évaluez impliquent une logique complexe, plusieurs variables ou des opérateurs relationnels et logiques, les modèles if-else offrent plus de flexibilité et sont mieux adaptés à ces situations que les instructions switch.
2. Conditions basées sur la plage : Lorsque vous devez vérifier une plage de valeurs ou de conditions qui ne sont pas discrètes, les modèles if-else offrent une meilleure solution, car les instructions switch sont conçues pour comparer des valeurs discrètes.
3. Petit nombre de conditions : Si vous n’avez que quelques conditions simples à vérifier, l’utilisation d’un modèle if-else peut être plus simple et plus facile à écrire qu’une instruction switch.
4. Cas non constants : Les instructions switch nécessitent des valeurs constantes pour les étiquettes de cas, ce qui signifie qu’elles ne peuvent pas être des expressions qui changent au moment de l’exécution. Si vous devez évaluer des conditions avec des valeurs non constantes, les modèles if-else sont le choix approprié.
5. Évaluer les valeurs de vérité ou de fausseté : Les modèles if-else conviennent lorsque vous devez vérifier si une valeur est vraie ou fausse. Les instructions switch ne sont pas conçues pour ce type d’évaluation et nécessiteraient un code plus détaillé pour obtenir le même résultat.
6. Conditions de sortie anticipée : Si vous avez une condition de sortie anticipée où une évaluation supplémentaire n’est pas nécessaire une fois qu’une certaine condition est remplie, les modèles if-else peuvent être plus efficaces. Avec une instruction switch, tous les cas sont évalués, même si une première correspondance est trouvée (sauf si vous utilisez une instruction « break »).

Décider de switch ou if-else

Les deux switch et if-else résoudre des problèmes similaires et avoir des avantages et des inconvénients en fonction de vos cas d’utilisation. Pour vous aider à prendre votre décision, j’ai créé une simple instruction switch :

switch (yourUseCase) {
  case 'large_number_of_conditions':
  case 'single_variable_evaluation':
  case 'multiple_discrete_values':
    console.log('Consider using a switch statement.');
    break;
  case 'complex_conditions':
  case 'range_based_conditions':
  case 'non_constant_cases':
    console.log('Consider using an if-else pattern.');
    break;
  default:
    console.log('Choose the most appropriate control structure based on your specific use case.');
}

switch Fonctionnalité et techniques des déclarations :

L’instruction switch fournit des fonctionnalités et des concepts supplémentaires qui peuvent être utilisés pour améliorer les performances, la lisibilité et la concision de votre code.

Le default cas

Le cas par défaut dans une instruction switch est exécuté lorsqu’aucun des autres cas ne correspond à l’expression fournie. Il sert de solution de repli pour gérer les valeurs inattendues ou inconnues, garantissant qu’une réponse est fournie même s’il n’y a pas de cas correspondant.

const beverage = 'lemonade';

switch (beverage) {
  case 'coffee':
    console.log('☕️ Enjoy your coffee!');
    break;
  case 'tea':
    console.log('🍵 Have a relaxing cup of tea!');
    break;
  default:
    console.log('🥤 Your choice of drink is not listed, but cheers anyway!');
}

Le break mot-clé

Le break Le mot-clé est utilisé dans une instruction switch pour quitter le bloc switch une fois qu’un cas correspondant est trouvé et exécuté. Il empêche le code de continuer à exécuter les cas restants, garantissant que seule la sortie correcte est générée.

const transport = 'bike';

switch (transport) {
  case 'car':
    console.log('🚗 Drive safely!');
    break;
  case 'bike':
    console.log('🚲 Enjoy your bike ride!');
    break;
  case 'bus':
    console.log('🚌 Have a pleasant bus journey!');
    break;
}

La technique Fall-Through

Un cas ne peut pas avoir plus d’une condition dans une instruction switch. Pour incorporer plusieurs conditions dans un cas, envisagez d’utiliser la technique de basculement. Non seulement cela vous fait gagner du temps, mais cela vous assure ne te répète pas.

Un échec dans une instruction switch se produit lorsque vous omettez intentionnellement le break mot-clé dans un cas, permettant à l’exécution du code de continuer jusqu’au(x) cas suivant(s) jusqu’à ce qu’un break est rencontré ou la fin du bloc de commutation est atteinte. Cela peut être utile lorsque plusieurs cas partagent la même sortie ou action.

const clothing = 'jacket';

switch (clothing) {
  case 't-shirt':
  case 'shorts':
    console.log('😎 Looks like it\'s warm outside!');
    break;
  case 'jacket':
  case 'sweater':
    console.log('❄️ Bundle up, it\'s cold!');
    
  case 'scarf':
    console.log('🧣 Don\'t forget your scarf!');
    break;
}

Problèmes et pièges courants

Exécution de cas multiples (oubli d’utiliser le break déclaration)

Une erreur fréquente lors de l’utilisation des instructions switch est de ne pas inclure le break déclaration après chaque cas. Cette erreur entraîne un échec involontaire, exécutant plusieurs cas au lieu de celui souhaité.

Comment le réparer: Ajouter un break déclaration après chaque cas pour éviter les échecs.

const mood = 'happy';

switch (mood) {
  case 'happy':
    console.log('😀 Keep smiling!');
    
  case 'sad':
    console.log('☹️ Cheer up!');
    break;
  case 'angry':
    console.log('😠 Take a deep breath!');
    break;
}

Valeurs et types de comparaison incorrects

Les instructions switch utilisent une comparaison stricte, ce qui peut entraîner des résultats inattendus lors de la comparaison de différents types de données. Dans l’exemple ci-dessous, la chaîne "2" n’est pas égal au nombre 2. Cet écueil peut empêcher vos cas de s’exécuter comme prévu.

Comment résoudre le problème : considérez le type de vos variables et rappelez-vous qu’il sera évalué de manière stricte. Manuscrit peut être utile si vous travaillez sur des projets plus importants.

const numOfPets = '2';

switch (numOfPets) {
  case 2: 
    console.log('🐾 Double the fun!');
    break;
  default:
    console.log('🐾 Share the love!');
}

Problèmes de portée

Un écueil courant dans les instructions switch est de déclarer des variables sans portée de bloc ou des portées incorrectes, ce qui les rend accessibles dans d’autres cas ou crée des erreurs de syntaxe. Vous pouvez rencontrer un Uncaught SyntaxError: ... si vous essayez de redéclarer la même variable dans plusieurs clauses.

Les correctifs :

• Pour les variables communes que vous avez l’intention d’utiliser dans tous les cas, déclarez-les avec let avant votre instruction switch, ou ;
• Portez vos clauses en tant que portée de bloc (c’est-à-dire enveloppez vos clauses avec des parenthèses { ... })

Bloquer la portée de vos clauses :

switch (weather) {
  case 'rain':
    const notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  case 'thunder':
    
    console.log(notification + ' ⚡ Be careful!');
    break;
}

switch (weather) {
  case 'rain': { 
    const notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  }
  case 'thunder': {
    const notification = '⚡ Be careful!';
    console.log(notification);
    break;
  }
}


let notification = '' 
switch (weather) 
  case 'rain':
    notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  case 'thunder':
    notification = '⚡ Be careful!';
    console.log(notification);
    break;
}

Conclusion

Maintenant que vous savez ce qu’est un switch est, comment cela fonctionne et quand l’utiliser, il est temps de commencer à l’implémenter ! J’espère que vous avez apprécié cet article. Rejoignez-nous sur la communauté SitePoint si vous avez des questions sur cette pièce ou sur JavaScript en général.