Switch
Learn how to handle multiple conditions cleanly using the switch statement in JavaScript.
Switch
A switch statement is a cleaner way to handle multiple conditions when they all check the same variable.
Instead of writing a long chain of else if blocks all comparing the same thing, switch lets you list out all the cases neatly in one place.
// This...
if (day === "Mon") { ... }
else if (day === "Tue") { ... }
else if (day === "Wed") { ... }
else if (day === "Thu") { ... }
// Becomes this...
switch (day) {
case "Mon": ...
case "Tue": ...
case "Wed": ...
case "Thu": ...
}Same logic — but the switch version is easier to read, especially when you have many cases.
Basic Syntax
switch (expression) {
case value1:
// runs if expression === value1
break;
case value2:
// runs if expression === value2
break;
default:
// runs if no case matched
}expression— the value you are checkingcase— a possible value to match againstbreak— stops execution after a match is founddefault— likeelse, runs when nothing matches
A Simple Example
let day = "Wednesday";
switch (day) {
case "Monday":
console.log("Start of the work week.");
break;
case "Wednesday":
console.log("Middle of the week.");
break;
case "Friday":
console.log("Almost the weekend!");
break;
default:
console.log("Just another day.");
}
// Middle of the week.JavaScript checks each case from top to bottom using strict equality ===. When it finds a match, it runs that block and then break jumps it out of the switch.
What Happens Without break — Fallthrough
This is the most important thing to understand about switch. If you forget break, JavaScript does not stop at the matched case — it falls through and runs every case below it until it hits a break or the end.
let color = "red";
switch (color) {
case "red":
console.log("Red");
case "blue":
console.log("Blue");
case "green":
console.log("Green");
}
// Red
// Blue
// GreenIt matched "red" — but without break, it kept going and ran all three. This is almost always a bug.
// Correct version with break
switch (color) {
case "red":
console.log("Red");
break;
case "blue":
console.log("Blue");
break;
case "green":
console.log("Green");
break;
}
// RedAlways add break at the end of every case unless you intentionally want fallthrough. Forgetting break is one of the most common switch bugs.
Using default
default is the fallback — it runs when none of the cases match. Think of it as the else of a switch statement.
let language = "Spanish";
switch (language) {
case "English":
console.log("Hello!");
break;
case "Arabic":
console.log("مرحبا!");
break;
case "French":
console.log("Bonjour!");
break;
default:
console.log("Language not supported yet.");
}
// Language not supported yet.default does not need a break since it is always the last case — but adding one is not wrong.
Intentional Fallthrough — Grouping Cases
Sometimes fallthrough is actually useful. When multiple cases should run the same code, you can stack them on purpose.
let month = "February";
switch (month) {
case "January":
case "February":
case "March":
console.log("Winter");
break;
case "April":
case "May":
case "June":
console.log("Spring");
break;
case "July":
case "August":
case "September":
console.log("Summer");
break;
default:
console.log("Autumn");
}
// WinterEmpty cases fall through to the next one automatically. All three winter months share the same output — clean and no repetition.
switch Uses Strict Equality ===
Switch always compares using === — type and value both have to match.
let input = "1"; // string
switch (input) {
case 1:
console.log("Number one");
break;
case "1":
console.log("String one"); // this runs
break;
}
// String one"1" and 1 are different. This is the same reason we always prefer === over == — and switch enforces it automatically.
A Real Example — User Roles
let role = "editor";
switch (role) {
case "admin":
console.log("Full access — manage users, content, and settings.");
break;
case "editor":
console.log("Can create and edit content.");
break;
case "viewer":
console.log("Read-only access.");
break;
default:
console.log("Unknown role. Access denied.");
}
// Can create and edit content.This is a pattern you will see in real applications — routing permissions, handling API responses, managing app states.
switch vs if/else — When to Use Which
Both do similar things. Here is how to decide:
| Situation | Use |
|---|---|
| Checking one variable against many exact values | switch |
Checking ranges like score >= 90 | if/else |
Complex conditions with && and ` | |
| 2–3 simple conditions | if/else |
| 4+ cases on the same variable | switch |
// switch is perfect here — same variable, exact values
switch (status) {
case "pending": ...
case "active": ...
case "cancelled": ...
}
// if/else is better here — ranges, not exact values
if (temperature > 40) { ... }
else if (temperature > 30) { ... }
else if (temperature > 20) { ... }Summary
switchcompares one expression against multiple possible values- It uses strict equality
===under the hood - Always add
breakto prevent fallthrough — unless you want it - Stack empty cases on top of each other to group them
defaultis the fallback when nothing matches- Use
switchwhen checking the same variable against many exact values — useif/elsefor ranges and complex conditions