JS Switch

Think of a vending machine, you press a specific button, and the machine checks it against each labeled slot until it finds a match, then dispenses that exact item, ignoring all the other buttons. A switch statement in JavaScript works similarly, it compares one value against several possible cases, running the code for whichever case matches, which can be cleaner than a long chain of else if statements when checking a single value against many options. You'll see switch used for things like handling different menu selections or theme choices across sites like cookiescursor.com.

In this page:

Basic switch Syntax
case and break
default
Grouping Cases Together
switch vs if-else

Basic switch Syntax

A switch statement takes a value in parentheses and compares it against each case label in order, running the code inside the first matching case block.

Note: switch is often more readable than a long else if chain when you're comparing the exact same variable against many possible values.

Warning: switch uses strict comparison internally, so the type of the value being compared must match the case label exactly, 1 and 1 are not considered equal.

Example: Basic switch Syntax

javascript

const day = "Mon";
switch (day) {
  case "Mon":
    console.log("Start of week");
}

case and break

Each case label marks the start of a block to run for a specific matching value, and break exits the switch statement immediately once its block finishes, preventing execution from continuing into the next case.

Note: As a habit, always add a break at the end of every case unless you specifically intend to fall through into the next one.

Warning: Missing a break causes fall-through, execution continues running the code in the next case as well, even though its condition wasn't matched.

Example: case and break

javascript

const day = "Mon";
switch (day) {
  case "Mon":
    console.log("Monday");
    break;
  case "Tue":
    console.log("Tuesday");
    break;
}

default

The default case runs when none of the listed case labels match the switch value, functioning similarly to a final else in an if/else if chain, and is commonly placed last, though it can technically appear anywhere.

Note: Always include a default case, even if it just logs an unexpected value, it makes debugging unmatched cases much easier.

Warning: Without a default case, a switch statement with no matching case simply does nothing, which can silently hide bugs.

Example: default

javascript

const day = "Sun";
switch (day) {
  case "Mon":
    console.log("Weekday");
    break;
  default:
    console.log("Not Monday");
}

Grouping Cases Together

Multiple case labels can share the same block of code by stacking them without a break in between, letting several different values all trigger the same response.

Note: Grouped cases are especially handy for handling multiple equivalent inputs, like both Sat and Sun meaning weekend.

Warning: Only the very last case in a grouped stack should have the break, adding one earlier would prevent the group from working together.

Example: Grouping Cases Together

javascript

const day = "Sat";
switch (day) {
  case "Sat":
  case "Sun":
    console.log("Weekend");
    break;
  default:
    console.log("Weekday");
}

switch vs if-else

switch tends to be clearer when comparing one single value against many specific possibilities, while if-else chains are more flexible for complex conditions involving ranges, multiple variables, or logical combinations.

Note: If your conditions involve ranges, like score >= 60, stick with if-else, switch is built for exact value matching, not ranges.

Warning: Trying to force range-based logic into a switch statement, using tricks like switch (true), can make code confusing rather than clearer.

Example: switch vs if-else

javascript

const num = 5;
// switch is clean for one value vs many options:
switch (num) {
  case 5:
    console.log("Five");
    break;
}
// if-else is better for ranges:
if (num > 0 && num < 10) {
  console.log("Single digit");
}

Common Mistakes

Forgetting a break statement at the end of a case, which causes execution to accidentally fall through into the next case.
Expecting switch to use loose equality like ==, it actually uses strict comparison, similar to ===, when matching cases.
Omitting the default case, which silently does nothing if none of the listed cases match.

Chapter Summary

switch compares one value against a series of case labels and runs the matching block.
break stops execution from falling through into the next case after a match is found.
default provides a fallback block that runs when no case matches, similar to an else in an if chain.

Browser Support

The switch statement is a core JavaScript feature supported identically across every browser and JavaScript environment.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Conditionals Next Lesson → JS Loop For

JS Switch

Basic switch Syntax

case and break

default

Grouping Cases Together

switch vs if-else

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code