switch
Compare une valeur à une liste de cas case et exécute le code à partir du premier qui correspond.
Exemple
#function taskLabel(type) {
switch (type) {
case 'video':
return 'Film'
case 'question':
return 'Quiz'
case 'sort':
return 'Exercice'
default:
return 'Leçon'
}
}
console.log(taskLabel('video'))
console.log(taskLabel('sort'))
console.log(taskLabel('analyze'))Définition et utilisation
#L’instruction switch évalue une expression une fois, puis compare le résultat aux étiquettes case les unes après les autres. Quand elle en trouve une qui correspond, elle exécute le code à partir de cet endroit. Si rien ne correspond, elle passe au default optionnel.
La comparaison se fait avec l’opérateur strict ===, donc la chaîne "1" ne correspond pas au nombre 1. Chaque cas se termine en général par break ou return. Sans cela, l’exécution « tombe » (fall-through) dans le case suivant, ce qui est parfois une erreur, mais permet aussi de regrouper plusieurs cas en un seul.
switch est lisible quand vous comparez une seule variable à plusieurs valeurs concrètes, par ex. un type de tâche ou un nom de commande. Pour des plages numériques et des conditions complexes, if...else convient mieux.
Syntaxe
#switch (expression) {
case value1:
// instructions
break
case value2:
case value3:
// instructions communes
break
default:
// si rien ne correspond
}Plus d’exemples
#const level = 2
switch (level) {
case 1:
console.log('Débloqué : HTML')
case 2:
console.log('Débloqué : CSS')
case 3:
console.log('Débloqué : JavaScript')
break
default:
console.log('Aucune récompense')
}L’exécution commence à case 2 et continue jusqu’à rencontrer un break. C’est parfois voulu, mais bien plus souvent c’est simplement un break oublié.
const answer = '1'
switch (answer) {
case 1:
console.log('le nombre 1')
break
case '1':
console.log('la chaîne "1"')
break
}const points = 75
switch (true) {
case points >= 90:
console.log('Médaille d’or')
break
case points >= 60:
console.log('Médaille d’argent')
break
default:
console.log('Médaille de bronze')
}Ce schéma fonctionne parce que le résultat de chaque condition est comparé à true. Beaucoup de développeurs préfèrent un simple if...else dans cette situation.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Terminez chaque cas par
breakoureturn. Si le fall-through est volontaire, laissez un commentaire, par ex.// suite, pour que personne ne le prenne pour une erreur. - En déclarant des variables à l’intérieur d’un
case, entourez son code d’accolades :case "video": { ... }. Tous les cas partagent un seul bloc, donc deuxconstdu même nom donneront une erreur de syntaxe. - Quand
switchne fait que transformer une valeur en une autre, un objet est souvent plus simple :const labels = { video: "Film", question: "Quiz" }et une lecturelabels[type].
Entrées associées
#- if...elseExécute un bloc de code seulement si une condition est vraie, et sinon un bloc else optionnel.
- breakTermine immédiatement une boucle ou une instruction switch et passe au code qui la suit.
- ===L’opérateur d’égalité stricte compare des valeurs sans conversion de types : true n’est obtenu que pour le même type et la même valeur.
- returnTermine l’exécution d’une fonction et transmet une valeur à l’endroit où la fonction a été appelée.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.