Course outline · 0% complete

0/29 lessons0%

Course overview →

switch

lesson 3-2 · ~8 min · 8/29

One value, many exact matches

When you compare one variable against a list of exact values, a chain of else if (day === ...) gets repetitive. switch is built for that shape:

const day = "sat";

switch (day) {
  case "sat":
  case "sun":
    console.log("Weekend");
    break;
  case "mon":
    console.log("Back to work");
    break;
  default:
    console.log("Midweek");
}

Three rules:

  1. Matching uses strict === comparison.
  2. break ends the case. Without it, execution falls through into the next case. Stacking two case labels (like "sat" and "sun" above) uses that fall-through on purpose to share one body.
  3. default runs when nothing matched, like a final else.

Modern Python got match in 3.10, which plays a similar role.

Matching a weekend with stacked labels

This switch handles three outcomes across four case labels, because "sat" and "sun" share a single body. With day set to "sat", control enters at the first matching label and runs the body directly beneath it.

const day = "sat";

switch (day) {
  case "sat":
  case "sun":
    console.log("Weekend");
    break;
  case "mon":
    console.log("Back to work");
    break;
  default:
    console.log("Midweek");
}

Output

Weekend

Notice that case "sat": has no body of its own. Since there is no break after it, control simply continues into the next case, which is what lets one body serve both weekend days. That is fall-through used deliberately. If day held "wed", none of the labels would match and default would print Midweek.

A traffic light with a catch-all

Four outcomes for a single value is precisely the shape switch was designed for. Here light holds "yellow", so the second case matches.

const light = "yellow";

switch (light) {
  case "green":
    console.log("Go");
    break;
  case "yellow":
    console.log("Slow down");
    break;
  case "red":
    console.log("Stop");
    break;
  default:
    console.log("Broken light");
}

Output

Slow down

Every case body here ends with break;, so no case leaks into the one below it. The catch-all is written as default: with no case keyword and no value, and it covers everything the listed cases missed, including a typo like "Yellow" with a capital letter, since matching is strict.

Leaving out a break

When a matching case has no break at the end, execution falls through and the next case body runs too, even though its value did not match. The switch does not re-test anything, it simply keeps going until it hits a break or the closing brace.

That behavior is legal and occasionally useful, which is why stacked labels sharing one body work at all. It is also one of the classic JavaScript bugs, because a missing break looks like nothing and produces two lines of output where you expected one.

Case body ends withWhat runs
break;just that case body, then the switch is done
nothingthat body and every following body until a break

A useful habit: write the break at the same time as the case, before filling in the body. Then omitting one is always a deliberate choice you can see rather than an oversight.