switch
Compares a value against a list of case labels and runs the code from the first match.
Example
#function taskLabel(type) {
switch (type) {
case 'video':
return 'Video'
case 'question':
return 'Quiz'
case 'gap':
case 'sort':
return 'Exercise'
default:
return 'Lesson'
}
}
console.log(taskLabel('video'))
console.log(taskLabel('sort'))
console.log(taskLabel('analyze'))Definition and usage
#The switch statement evaluates an expression once, then compares the result against the case labels one by one. When it finds a match, it runs the code from that point. If nothing matches, it falls through to the optional default.
The comparison uses the strict === operator, so the string "1" doesn’t match the number 1. Each case usually ends with break or return. Without it, execution “falls through” to the next case, which is sometimes a bug, but also lets you combine several cases into one.
switch is readable when you’re checking one variable against several specific values, like a task type or a command name. For numeric ranges and compound conditions, if...else fits better.
Syntax
#switch (expression) {
case value1:
// statements
break
case value2:
case value3:
// shared statements
break
default:
// when nothing matches
}More examples
#const level = 2
switch (level) {
case 1:
console.log('Unlocked: HTML')
case 2:
console.log('Unlocked: CSS')
case 3:
console.log('Unlocked: JavaScript')
break
default:
console.log('No rewards')
}Execution starts at case 2 and keeps running until it hits break. Sometimes that’s intentional, but far more often it’s simply a forgotten break.
const answer = '1'
switch (answer) {
case 1:
console.log('the number 1')
break
case '1':
console.log('the string "1"')
break
}const points = 75
switch (true) {
case points >= 90:
console.log('Gold medal')
break
case points >= 60:
console.log('Silver medal')
break
default:
console.log('Bronze medal')
}This pattern works because the result of each condition is compared against true. Many developers prefer a plain if...else in this situation.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- End every case with
breakorreturn. If falling through is intentional, leave a comment, e.g.// falls through, so no one mistakes it for a bug. - When declaring variables inside a
case, wrap its code in braces:case "video": { ... }. All the cases share one block, so twoconsts with the same name cause a syntax error. - When
switchjust maps one value to another, an object is often simpler:const labels = { video: "Video", question: "Quiz" }and the lookuplabels[type].
Related entries
#- if...elseRuns a block of code only when the condition is true, and otherwise an optional else block.
- breakImmediately ends a loop or a switch statement and moves on to the code right after it.
- ===The strict equality operator compares values without type conversion: true only for the same type and the same value.
- returnEnds a function and passes a value back to the place where the function was called.
Spotted a mistake or missing an example? Write to us.