The switch statement

The switch statement is a control-flow tool for one common shape of decision: you have one value, and you want to jump to one of several named cases. It is a cousin of an if / else if chain, but it reads best when the question is “Which exact value is this?”

You already met comparisons, including the difference between === and ==. A switch uses strict matching like ===. You also saw in Type conversion that inputs usually arrive as strings. Those two facts matter here: the string "1" will not match the number case 1.

Here is the shape you will practice throughout the lesson:

1switch (value) {2  case "first":3    // statements for first4    break;5  case "second":6    // statements for second7    break;8  default:9    // statements when no case matched10}

The important rule is not “run one block.” The actual rule is: find the first matching case, then run statements downward until something stops the switch. Most of the lesson is about what counts as a match, and what stops the downward flow.

Every case label is compared with the switch value using strict matching, the same idea as ===. JavaScript does not helpfully convert strings to numbers for you while choosing a case.

1const input = "1";2let label;3 4switch (input) {5  case 1:6    label = "number one";7    break;8  case "1":9    label = "string one";10    break;11  default:12    label = "unknown";13}14 15console.log(label);

This prints string one. The first case is the number 1, but the switch value is the string "1". The second case has the same type and value, so it matches.

1const input = "1";2const value = Number(input); // or keep input as a string3 4switch (value) {5  case 1:6    console.log("number one");7    break;8  case "1":9    console.log("string one");10    break;11  default:12    console.log("unknown");13}

You may see a pattern called switch (true) for ranges:

1const score = 82;2let grade;3 4switch (true) {5  case score >= 90:6    grade = "A";7    break;8  case score >= 80:9    grade = "B";10    break;11  default:12    grade = "keep practicing";13}14 15console.log(grade);

This works because each case expression produces a boolean, and the first true case matches switch (true). Use it sparingly. For most beginner code, a normal if / else if chain is clearer for ranges because each line is visibly a condition.

A switch does not automatically stop at the next case label. Once a match is found, JavaScript keeps running statements downward. A break statement exits the switch.

Use this recorded replay to see the difference. Pick yellow, then remove yellow’s break. The same input changes from slow down to go because the green case runs after yellow.

1const color = "yellow";Run2let action = "";3 4switch (color) {5  case "red":6    action = "stop";7    break;8  case "yellow":9    action = "slow down";10    break;11  case "green":12    action = "go";13    break;14  default:15    action = "check the signal";16}17 18console.log(action);

The default label runs when no case matched. It is the “none of the above” button. Most examples place it last because that is easiest to read, but JavaScript allows it anywhere.

1const size = "large";2let price;3 4switch (size) {5  default:6    price = "ask staff";7    break;8  case "small":9    price = 3;10    break;11  case "large":12    price = 5;13}14 15console.log(price);

With size set to "large", JavaScript skips the middle default and matches case "large". The output is 5. Default’s position did not make it run first.

But default follows the same fallthrough rules as every other label:

1const size = "medium";2let price = "";3 4switch (size) {5  default:6    price = "unknown";7  case "large":8    price = price + " size";9}10 11console.log(price);

Here "medium" matches no case, so default runs and sets price to "unknown". There is no break, so execution continues into the "large" case body and appends " size". The output is unknown size.

The safest fallthrough is an empty case that groups several labels before one shared body. Days of the week are a classic example:

1const day = "Saturday";2let kind;3 4switch (day) {5  case "Saturday":6  case "Sunday":7    kind = "weekend";8    break;9  default:10    kind = "weekday";11}12 13console.log(kind);

Saturday has no statements of its own, so it falls into Sunday’s shared body. That is intentional and easy to read. The shared body still ends with break.

A switch inside a function often returns from each case. A return exits the whole function, so it also prevents fallthrough:

1function shipping(speed) {2  switch (speed) {3    case "overnight":4      return 25;5    case "standard":6      return 7;7    default:8      return 0;9  }10}11 12console.log(shipping("standard"));

This prints 7. Once return 7 runs, the function is done. A break after that return would be unreachable.

You will use switches for small menus: keyboard commands, status strings, route names, display modes, and other exact labels. If the list grows large or comes from data, the next section gives you a cleaner alternative.

Sometimes a switch is only a long table: this key means that value. For that shape, a simple object literal plus bracket access is often shorter and safer.

1const prices = {2  apple: 1.2,3  banana: 0.5,4  cherry: 2,5};6 7const fruit = "banana";8const price = prices[fruit] ?? "unknown";9console.log(price);

prices[fruit] asks the object for the value stored at the key in fruit. If that key is missing, it would produce undefined, so the nullish coalescing operator ?? gives a fallback. Object basics get a full lesson in Stage 3; for now, read the braces as a tiny lookup table. The Map data structure comes later in Map & Set.

1const prices = {2  apple: 1.2,3  banana: 0.5,4  cherry: 2,5};6 7const fruit = "banana";8const price = prices[fruit] ?? "unknown";9console.log(price);

Common misconceptions

1switch ("a") {2  case "a":3    let message = "alpha";4    break;5  case "b":6    let message = "bravo";7    break;8}

1switch ("a") {2  case "a": {3    let message = "alpha";4    console.log(message);5    break;6  }7  case "b": {8    let message = "bravo";9    console.log(message);10    break;11  }12}

For prediction exercises, do not run the code first. Find the matching case, then read downward until a stop. After you answer, paste it into your console to prove it.

let badge = "";

switch ("silver") {
  case "gold":
    badge = "Gold";
    break;
  case "silver":
    badge = "Silver";
  case "bronze":
    badge = badge + " + Bronze";
    break;
  default:
    badge = "No badge";
}

console.log(badge);

const input = "1";
let page;

switch (input) {
  case 1:
    page = "first";
    break;
  default:
    page = "not found";
}

console.log(page);

const input = "1";
let page;

switch (Number(input)) {
  case 1:
    page = "first";
    break;
  default:
    page = "not found";
}

console.log(page);

const day = "Saturday";
let kind;

switch (day) {
  case "Saturday":
  case "Sunday":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

console.log(kind);

const day = "Saturday";
let kind;

switch (day) {
  case "Saturday":
  case "Sunday":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

console.log(kind);

function emojiForStatus(status) {
  switch (status) {
    case "success":
      return "✅";
    case "warning":
      return "⚠️";
    case "error":
      return "🚨";
    default:
      return "❓";
  }
}

console.log(emojiForStatus("warning"));

function emojiForStatus(status) {
  const icons = {
    success: "✅",
    warning: "⚠️",
    error: "🚨",
  };

  return icons[status] ?? "❓";
}

console.log(emojiForStatus("warning"));

function drinkSize(code) {
  switch (code) {
    case "S":
      return "small";
    case "M":
      return "medium";
  }
}

console.log(drinkSize("XL"));

function drinkSize(code) {
  switch (code) {
    case "S":
      return "small";
    case "M":
      return "medium";
    default:
      return "unknown size";
  }
}

console.log(drinkSize("XL"));

Read each code sample exactly. Your first-try score matters less than the explanation after each choice.

Key takeaways

• A switch evaluates one value, then compares it to case labels using strict matching like ===.
• Execution starts at the matching case and continues downward until break, return, or the end of the switch.
• default runs when no case matches. It can be placed anywhere, but it can also fall through if you omit break.
• Grouped empty cases are a clear way to share one body; non-empty intentional fallthrough needs a comment.
• Use object lookups when keys map directly to values. Use if / else when each branch asks a different condition.

Up next: Loops: while & for. You will repeat work and see that break can exit loops too.