DocsHub
Control Flow

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 checking
  • case — a possible value to match against
  • break — stops execution after a match is found
  • default — like else, 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
// Green

It 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;
}
// Red

Always 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");
}
// Winter

Empty 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:

SituationUse
Checking one variable against many exact valuesswitch
Checking ranges like score >= 90if/else
Complex conditions with && and `
2–3 simple conditionsif/else
4+ cases on the same variableswitch
// 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

  • switch compares one expression against multiple possible values
  • It uses strict equality === under the hood
  • Always add break to prevent fallthrough — unless you want it
  • Stack empty cases on top of each other to group them
  • default is the fallback when nothing matches
  • Use switch when checking the same variable against many exact values — use if/else for ranges and complex conditions

On this page