JavaScript Switch Statement

Switch Syntax

The switch statement evaluates an expression once at the beginning, then compares the result against multiple case values. This is more efficient than if...else if chains that re-evaluate conditions repeatedly. switch is perfect when you have one variable or expression that could match several specific values.

JavaScript compares the expression value with each case value in order from top to bottom. The comparison uses strict equality (===), so both value and type must match. If "3" is the expression and case 3: is tested, they won't match because the types differ (string vs number). This strict comparison prevents type-coercion bugs.

When a matching case is found, JavaScript executes that case's code block and continues executing subsequent cases until it hits a break statement or the end of the switch. This is called "fall-through" behavior. Without break, execution continues into the next case regardless of whether it matches, which is usually not desired.

The break statement exits the switch immediately, preventing fall-through to subsequent cases. Every case should typically end with break (unless you intentionally want fall-through). Forgetting break is a common bug that causes unexpected behavior. When break executes, control jumps to the first statement after the switch block.

The default case executes if no other case matches. It's like the else in an if...else chain—a catch-all for values that don't match any specific case. default is optional but recommended for handling unexpected values or providing fallback behavior. It can appear anywhere in the switch, but conventionally it's placed last.

// Switch statement
let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // "Wednesday"

Switch with Multiple Cases

Multiple case labels can share the same code block by stacking them together without break statements between them. This intentional fall-through lets you group cases that should execute the same code: case "Mon": case "Tue": case "Wed": console.log("Weekday"); break;. This is cleaner than repeating the same code for each case.

You can intentionally omit break to create fall-through behavior where one case flows into the next. While usually a bug, deliberate fall-through can be useful. However, always add a comment like // falls through to indicate intentional fall-through and prevent confusion. Most linters will warn about missing break unless you add this comment.

Remember that switch uses strict comparison (===) when matching cases. The case value and the switch expression must have the same type and value to match. If you switch on a string, numeric cases won't match even if the values look similar. Always be aware of types when using switch to avoid unexpected behavior.

Case values can be expressions, not just literals. You can write case getValue(): or case x + y: as long as the expression evaluates to a value for comparison. This flexibility allows dynamic case values. However, each case expression is evaluated when execution reaches it, which differs from the switch expression that's evaluated only once at the start.

The default case is optional, but it's strongly recommended. default handles unexpected or invalid values gracefully, preventing silent failures. Even if you think you've covered all possible values, default provides a safety net for edge cases, future changes, or values you didn't anticipate. Treat default like the else clause—a best practice for robust code.

// Multiple cases
let fruit = "Apple";

switch (fruit) {
  case "Apple":
  case "Pear":
    console.log("Green fruit");
    break;
  case "Banana":
  case "Lemon":
    console.log("Yellow fruit");
    break;
  default:
    console.log("Unknown fruit");
}

// Switch with expressions
let grade = 85;

switch (true) {
  case grade >= 90:
    console.log("A");
    break;
  case grade >= 80:
    console.log("B");
    break;
  case grade >= 70:
    console.log("C");
    break;
  default:
    console.log("F");
}