Chargement...

Instruction switch

Pour oui/non ou une plage, if / else reste l’outil du quotidien. Parfois la question change : laquelle de plusieurs valeurs fixes ? Code de jour 1…7, statut 'ok' / 'warn' / 'err', clé de menu. Pour cette forme, switch est plus propre qu’une longue chaîne else if. Vous savez déjà brancher ; ici vous faites correspondre une valeur à plusieurs case.

Que fait switch ?

switch regarde une expression entre parenthèses. Il compare cette valeur à chaque étiquette case. En cas de correspondance, les instructions de ce chemin s’exécutent. break quitte le switch pour que les suivants ne tournent pas. default est le secours quand rien n’a coincidé.

Les pièces en un coup d’œil

📊 Pièces quotidiennes de switch

Mot-clé Lecture quotidienne Usage typique
switch regarde cette valeur… ouvrir le choix
case si elle égale cette étiquette… une option fixe
break arrête ici ; quitte le switch finir après une correspondance
default si rien n’a coincidé… chemin de secours

La correspondance est de type égalité stricte (idée de ===). Un case numérique ne correspond pas à une chaîne de chiffres. Gardez valeur et étiquettes de même forme.

switch simple

javascript 
let day = 3;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

Une valeur, plusieurs chemins étiquetés

Ici day vaut 3, donc le chemin case 3 s’exécute et la Console affiche Wed. Les cases 1 et 2 ont été examinés et ignorés. Après break, le switch est terminé — default ne tourne pas.

Sans break, JavaScript continuerait dans les corps des cases suivants. On appelle cela le fall-through. Les débutants veulent presque toujours un break après chaque case terminé.

Pourquoi break compte

javascript 
let day = 2;
switch (day) {
case 1:
console.log("Mon");
case 2:
console.log("Tue");
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

Sans break, les cases suivants tournent aussi

day vaut 2. La correspondance commence à case 2, affiche Tue, continue dans case 3 et affiche Wed avant le break. Vous vouliez une étiquette ; vous en avez deux. Mettez break sous chaque case terminé sauf partage volontaire de code.

default quand rien ne correspond

javascript 
let day = 9;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
default:
console.log("other");
}

default couvre « aucun de ceux-là »

day vaut 9. Aucun case ne correspond, donc default tourne et vous voyez other. Utilisez default quand toute valeur inattendue a encore besoin d’un message sûr. Omettez-le seulement si le silence convient.

Cases en chaînes

javascript 
let status = "warn";
switch (status) {
case "ok":
console.log("green");
break;
case "warn":
console.log("yellow");
break;
case "err":
console.log("red");
break;
default:
console.log("unknown");
}

Les cases peuvent aussi être des chaînes

status vaut "warn", donc vous voyez yellow. Les cases chaînes sont courants pour de courts codes de formulaire ou d’API. Les plages comme « note de 60 à 90 » restent pour if / else if — switch veut des étiquettes discrètes.

Stocker le libellé choisi

javascript 
let day = 1;
let label;
switch (day) {
case 1:
label = "Mon";
break;
case 2:
label = "Tue";
break;
default:
label = "other";
}
console.log(label);

Nommez le résultat de la correspondance

Assignez label dans chaque case (et dans default), puis utilisez-le une fois après. Ici label devient "Mon". Même schéma qu’avec if / else — choisir d’abord, utiliser ensuite.

Affichez le chemin choisi sur la page

Créez un court message avec switch, puis écrivez-le dans la page.

Choix de page avec switch

html 
<!DOCTYPE html>
<html>
<head>
<title>Switch — page choice</title>
</head>
<body>
<p id="out">…</p>
<script>
let day = 3;
let msg;
switch (day) {
case 1:
msg = "Mon";
break;
case 2:
msg = "Tue";
break;
case 3:
msg = "Wed";
break;
default:
msg = "other";
}
let box = document.getElementById("out");
box.textContent = "day=" + msg;
</script>
</body>
</html>

day vaut 3, la page montre day=Wed. Mettez day à 9, rechargez : vous devriez voir day=other. La leçon suivante (for) répète un travail plusieurs fois ; pour « quelle étiquette fixe ? », l’outil reste switch.

À vous de jouer

  1. Construisez un switch sur let day = 1 qui journalise "Mon" pour le case 1.
  2. Ajoutez des cases pour 2 et 3 avec break après chacun.
  3. Mettez day à 9 et vérifiez que default journalise "other".
  4. Basculez sur une chaîne status avec "ok", "warn", "err".
  5. Retirez temporairement un break et observez le fall-through dans la Console.
  6. Dans la démo HTML, changez seulement day, rechargez, lisez le nouveau texte day=.

Erreurs fréquentes

  • Oublier break après un case (les suivants tournent aussi)
  • Utiliser switch pour des plages ouvertes (score >= 60) — préférez if / else if
  • Mélanger les types pour qu’un nombre ne corresponde jamais à un case chaîne
  • Omettre default alors que les valeurs inconnues ont encore besoin d’un message
  • Remplacer chaque if par switch quand le contrôle n’est pas une liste d’étiquettes fixes

Résumé

  • switch fait correspondre une valeur à plusieurs étiquettes case
  • break arrête le switch après une correspondance
  • default tourne quand rien n’a coincidé
  • Idéal pour des valeurs discrètes ; les plages restent avec if / else if
  • Stockez un libellé si le résultat sert plus tard ; affichez-le sur la page au besoin
  • Suite : boucle for — répéter un travail un nombre fixe de fois

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 22 de 23
Javascript Tutoriel