The switch Statement

When one value needs to be compared against many possible matches, a switch statement can be tidier than a long if/else if chain. It has one notorious trap — fall-through — which this lesson shows how to avoid and occasionally use on purpose.

Basic syntax

function dayType(day) {
  switch (day) {
    case "Saturday":
      return "weekend";
    case "Sunday":
      return "weekend";
    case "Monday":
      return "start of the week";
    default:
      return "weekday";
  }
}

console.log(dayType("Sunday"));
console.log(dayType("Monday"));
console.log(dayType("Thursday"));

weekend
start of the week
weekday

The value in parentheses is compared against each case using strict equality (===). The first match runs; default runs if nothing matches. Here each case ends with return, which leaves the function immediately.

break and fall-through

Outside a function, cases end with break. Without it, execution falls through into the next case's code, even though that case doesn't match:

const level = 2;

switch (level) {
  case 1:
    console.log("one");
  case 2:
    console.log("two");
  case 3:
    console.log("three");
  default:
    console.log("default");
}

two
three
default

Matching case 2 ran its line, then carried straight on through every case below. Forgetting break is a very common bug:

const level = 2;

switch (level) {
  case 1:
    console.log("one");
    break;
  case 2:
    console.log("two");
    break;
  default:
    console.log("default");
}

two

Grouping cases on purpose

Fall-through is useful when several values should share the same code. Stack the case labels with nothing between them:

function season(month) {
  switch (month) {
    case "Dec":
    case "Jan":
    case "Feb":
      return "winter";
    case "Mar":
    case "Apr":
    case "May":
      return "spring";
    default:
      return "summer or autumn";
  }
}

console.log(season("Jan"), season("Apr"), season("Aug"));

winter spring summer or autumn

Strict comparison

Because switch uses ===, types must match:

const input = "1";

switch (input) {
  case 1:
    console.log("number one");
    break;
  default:
    console.log("no match for", JSON.stringify(input));
}

no match for "1"

Values read from forms or URLs are strings — convert them with Number() before switching on numbers.

Ranges with switch (true)

A switch can't match ranges directly, but a well-known pattern switches on true and puts conditions in the cases:

const speed = 72;

switch (true) {
  case speed > 100:
    console.log("way too fast");
    break;
  case speed > 60:
    console.log("over the limit");
    break;
  default:
    console.log("fine");
}

over the limit

It works, but most developers find an if/else if chain clearer for ranges.

Block scope inside cases

All cases share one block, so declaring the same const in two cases is an error. Wrap a case's code in its own braces when it needs local variables: case "a": { const x = 1; ... break; }.

Alternative: lookup objects

When each case just maps a value to another value, an object is often shorter than a switch:

const icons = { sunny: "☀️", rainy: "🌧️", snowy: "❄️" };

function icon(weather) {
  return icons[weather] ?? "❓";
}

console.log(icon("rainy"), icon("foggy"));

🌧️ ❓

Try it yourself