Besoin de gérer plusieurs conditions en JavaScript sans vous noyer dans les `if…else` ? L’instruction `switch` est faite pour ça.
Ce guide vous montre la syntaxe et des exemples concrets pour la maîtriser rapidement.
Exemples concrets d’utilisation du switch
Le meilleur moyen de comprendre le `switch case` est de voir comment il fonctionne. Voici des situations courantes où cette instruction est très utile.
Exemple de base : gérer une chaîne de caractères
Imaginez que vous deviez afficher un message différent selon la valeur d’une variable. Au lieu d’écrire plusieurs `if`, vous pouvez utiliser un `switch`.
Dans cet exemple, on teste une variable `fruit`. L’expression du `switch` est évaluée une seule fois, puis comparée à chaque `case`. Si une correspondance est trouvée, le code associé est exécuté.
let fruit = 'Papaye';
let message;
switch (fruit) {
case 'Orange':
message = 'Le prix des oranges est de 2€ le kilo.';
break;
case 'Mangue':
case 'Papaye':
message = 'Les mangues et les papayes sont à 5€ le kilo.';
break;
default:
message = `Désolé, nous n'avons plus de ${fruit}.`;
}
console.log(message); // Affiche : Les mangues et les papayes sont à 5€ le kilo.
Regrouper plusieurs cas pour un même résultat
Vous n’êtes pas obligé d’écrire du code pour chaque `case`. Si plusieurs cas doivent exécuter la même instruction, vous pouvez les regrouper. Il suffit de les lister les uns après les autres sans mettre de `break` entre eux.
C’est parfait pour vérifier, par exemple, si un jour est un jour de semaine ou de week-end.
let jour = new Date().getDay(); // Renvoie un chiffre de 0 (dimanche) à 6 (samedi)
let typeDeJour;
switch (jour) {
case 0: // Dimanche
case 6: // Samedi
typeDeJour = "C'est le week-end !";
break;
case 1: // Lundi
case 2: // Mardi
case 3: // Mercredi
case 4: // Jeudi
case 5: // Vendredi
typeDeJour = "C'est un jour de travail.";
break;
default:
typeDeJour = "Jour inconnu.";
}
console.log(typeDeJour);
Ici, si `jour` vaut 6 ou 0, le même code est exécuté. C’est plus propre qu’une longue condition `if (jour === 6 || jour === 0)`.
Comprendre l’effet de l’oubli d’un `break` (fall-through)
Le mot-clé `break` est très important. Il indique à JavaScript de sortir du bloc `switch` une fois qu’un `case` correspondant est exécuté. Si vous oubliez le `break`, l’exécution continue au `case` suivant, même si la valeur ne correspond pas.
Ce comportement s’appelle le « fall-through » (ou « chute à travers »). Parfois c’est voulu, comme dans l’exemple des jours, mais souvent c’est une erreur.
Attention : L’oubli d’un `break` est une source de bugs fréquente. Le code va s’exécuter pour le cas correspondant et tous les cas suivants jusqu’au prochain `break` ou la fin du `switch`.
let niveau = 2;
switch (niveau) {
case 1:
console.log('Niveau 1 débloqué.');
case 2:
console.log('Niveau 2 débloqué.'); // Oubli du break ici
case 3:
console.log('Niveau 3 débloqué.');
break;
default:
console.log('Commencez le jeu !');
}
Le résultat affiché dans la console sera :
- `Niveau 2 débloqué.`
- `Niveau 3 débloqué.`
Comme il n’y a pas de `break case` après le `case 2`, le code du `case 3` est aussi exécuté.
Syntaxe et mots-clés de l’instruction switch
La syntaxe du `switch` est simple, mais il faut bien comprendre chaque partie. C’est une alternative très lisible à une cascade de `if…else`.
switch (expression) {
case valeur1:
// Instructions à exécuter si expression === valeur1
break;
case valeur2:
// Instructions à exécuter si expression === valeur2
break;
// ... autres cas
default:
// Instructions à exécuter si aucun cas ne correspond
}
Rôle des différents éléments
Chaque mot-clé a un rôle précis dans le fonctionnement de l’instruction `switch`.
- `switch (expression)` : Le point de départ. L’`expression` est évaluée une seule fois. Le résultat de cette évaluation sera comparé aux valeurs des différents `case`.
- `case valeurN` : Chaque `case` représente une valeur possible. Le `switch` compare la `valeur` du `case` au résultat de l’`expression` en utilisant une égalité stricte (`===`).
- `break` : Ce mot-clé est optionnel mais essentiel. Il stoppe l’exécution et fait sortir du bloc `switch`. Sans lui, le script continue d’exécuter le code des `case` suivants.
- `default` : Cette clause est aussi optionnelle. Son code est exécuté si aucun cas ne correspond à la valeur de l’expression. C’est l’équivalent du `else` final dans une structure `if…else if…else`.
Points clés et cas particuliers
Pour bien utiliser le `switch`, il faut connaître quelques subtilités. Elles vous éviteront des erreurs et vous aideront à écrire un code plus robuste.
La comparaison est toujours stricte (`===`)
C’est un point crucial. Le `switch` ne fait pas de conversion de type. Il compare la valeur ET le type de l’expression avec la valeur de chaque `case`. Une valeur `1` (nombre) n’est pas la même chose que ` »1″` (chaîne de caractères).
Si les types ne correspondent pas, le `case` est ignoré, même si les valeurs semblent identiques.
let x = "0";
switch (x) {
case 0: // Ici, 0 est un nombre
console.log("Le nombre est 0");
break;
default:
console.log("Le type ne correspond pas ou la valeur est différente.");
}
// Résultat dans la console : "Le type ne correspond pas ou la valeur est différente."
Dans cet exemple, `x` est une chaîne de caractères (` »0″`) alors que le `case` attend un nombre (`0`). Comme ` »0″ === 0` est faux, le code du `case` n’est pas exécuté et c’est le `default console log` qui s’active.
La position de la clause `default`
Même si on place le `default` à la fin par convention, ce n’est pas une obligation. Vous pouvez le mettre n’importe où dans le bloc `switch`.
Cependant, s’il n’est pas à la fin, il faut penser à ajouter un `break` après ses instructions. Sinon, l’exécution continuera dans les `case` suivants (fall-through).
let num = 3;
switch (num) {
case 1:
console.log("Un");
break;
default:
console.log("Nombre non reconnu");
break; // Ce break est important ici !
case 2:
console.log("Deux");
break;
}
// Si num = 3, affiche "Nombre non reconnu".
// Si num = 1, affiche "Un".
// Si vous retirez le break default, pour num = 3, il affichera "Nombre non reconnu" PUIS "Deux".
Gérer la portée des variables avec `let` et `const`
C’est un piège courant. Tous les `case` à l’intérieur d’un `switch` partagent le même bloc de portée (scope). Si vous déclarez une variable avec `let` ou `const` dans un `case`, vous ne pouvez pas déclarer une autre variable avec le même nom dans un autre `case`.
Le code suivant produit une erreur `SyntaxError`, car la variable `message` est déclarée plusieurs fois dans le même scope.
let action = 'dire_bonjour';
switch (action) {
case 'dire_bonjour':
let message = 'Bonjour !'; // Première déclaration
console.log(message);
break;
case 'dire_aurevoir':
let message = 'Au revoir !'; // Erreur : 'message' a déjà été déclaré
console.log(message);
break;
default:
console.log('Action inconnue.');
}
La solution : Pour créer un scope séparé pour chaque `case`, il suffit d’entourer le code de chaque `case` avec des accolades `{}`. Chaque `case` aura alors son propre bloc, et vous pourrez y déclarer des variables avec `let` et `const` sans conflit.
Voici le code corrigé :
let action = 'dire_bonjour';
switch (action) {
case 'dire_bonjour': { // On ouvre un bloc
let message = 'Bonjour !';
console.log(message);
break;
} // On ferme le bloc
case 'dire_aurevoir': { // On ouvre un autre bloc
let message = 'Au revoir !';
console.log(message);
break;
}
default: {
console.log('Action inconnue.');
}
}
`switch` ou `if…else` : que choisir ?
Le `switch` et le `if…else` permettent tous les deux de gérer des conditions. Le choix dépend de la situation.
Quand utiliser `switch` ?
- Quand vous testez une seule variable ou expression contre une liste de valeurs précises (ex: `jour === 1`, `fruit === ‘Pomme’`).
- Quand vous avez beaucoup de conditions à vérifier pour la même variable. Le `switch` est souvent plus lisible qu’une longue chaîne de `else if`.
- Quand vous voulez regrouper plusieurs cas pour exécuter le même code.
Quand utiliser `if…else` ?
- Quand vous devez évaluer des conditions complexes ou des plages de valeurs (ex: `age > 18 && age < 65`).
- Quand vous testez des variables différentes à chaque condition.
- Quand il n’y a que deux ou trois cas à gérer, un `if…else` simple peut être plus direct.
En résumé, l’instruction `switch` est un outil puissant pour rendre votre code plus propre lorsque vous gérez des conditions basées sur des valeurs discrètes.
Maintenant, c’est à vous de l’utiliser dans vos projets pour voir à quel point il simplifie la logique de votre code.
