The switch statement

The switch statement is a way to make a choice in your code. It fits one kind of choice well: you have one value, and you want different code for each exact value it might have.

You can do the same job with if and else if. A switch is easier to read when your question is "Which exact value is this?"

Two things from earlier lessons matter here:

• In Comparisons, you saw that === checks the value and the type. A switch compares the same way.
• In Type conversion, you saw that input from a user usually arrives as text (a string).

Put together, this means the text "1" does not match a case for the number 1. You'll see why in the next section.

Here is the shape of every switch in this 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 parts, line by line:

• switch (value) on line 1 names the value to check.
• Each case, like case "first": on line 2, is a case label: one value the switch might match.
• break on line 4 ends the switch.
• default on line 8 is the code to run when no case matches.

The rule to remember: JavaScript finds the first case that matches. It starts running there. Then it keeps running the lines below, until something stops it. Most of this lesson is about two questions: what counts as a match, and what stops the code.

1const drink = "tea";2let message;3 4switch (drink) {5  case "tea":6    message = "Tea is ready";7    break;8  default:9    message = "Choose another drink";10}11 12console.log(message);

Line by line:

• Line 1 stores "tea" in drink.
• Line 4 starts the switch on drink.
• Line 5 matches, because the value is "tea". Line 6 sets message to Tea is ready.
• Line 7, break, ends the switch.
• Line 12 prints Tea is ready.

If drink were "coffee", no case would match. Then default would run, and the code would print Choose another drink.

A switch compares its value with each case label using strict matching. That is the same check as ===: the value must be the same, and the type must be the same. JavaScript does not turn text into a number to make a case match.

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. Line 1 stores the text "1". Line 5 is a case for the number 1. Text and a number are different types, so line 5 does not match. Line 8 is a case for the text "1". Same type, same value, so it matches.

1const seats = 2;2 3switch (seats) {4  case 1 + 1:5    console.log("two seats");6    break;7  default:8    console.log("another number");9}

A case label does not have to be a value you type out. It can be an expression: a piece of code that produces a value. On line 4, 1 + 1 produces 2. That matches seats, so line 5 prints two seats. Still, keep case labels simple, as the next example shows.

1const code = "B";2 3function label(value) {4  console.log("check", value);5  return value;6}7 8switch (code) {9  case label("A"):10    break;11  case label("B"):12    console.log("matched B");13}

The function label prints a message each time it runs, so you can see when JavaScript checks a case. This code prints three lines:

1. check A: line 9 runs label("A"). "A" is not "B", so there is no match.
2. check B: line 11 runs label("B"). That matches.
3. matched B: line 12 runs.

JavaScript checks case labels in order, and it stops checking at the first match. So a case label that does real work, like loading data, may run or may not. That is why case labels should stay simple.

1const score = Number("not a number");2 3switch (score) {4  case NaN:5    console.log("a number");6    break;7  default:8    console.log("not a number");9}

NaN means "not a number". You get it when a number can't be made, like on line 1. NaN is the one value that is not equal to itself: NaN === NaN is false. So case NaN on line 4 never matches, and line 8 prints not a number.

To catch NaN, check Number.isNaN(score) before the switch. It gives true when score is NaN.

Now step through the same input two ways. First keep it as text. Then turn it into a number with Number(input) before the switch. Watch which case matches each time.

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

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 also see switch (true) used for ranges of numbers:

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);

Here the switch value is true. Each case label is a check, like score >= 90, that gives true or false. The first check that gives true matches. With a score of 82, line 5 gives false and line 8 gives true, so the grade is B.

This works, but use it rarely. For ranges, an if / else if chain is usually easier to read, because each line plainly shows its check.

A switch does not stop by itself at the next case label. After a match, JavaScript runs every line below it, even the lines under other case labels. A break statement ends the switch.

When the code runs on into the next case, that is called fallthrough: the code "falls through" to the case below.

Try it in the step-through below. Pick yellow, then remove the break from the yellow case. The result changes from slow down to go, because the green case runs after the yellow case.

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 matches. It is like a "none of these" choice. Most code puts it last, because that is easiest to read. But JavaScript lets you put it anywhere in the switch.

1const drink = "juice";2 3switch (drink) {4  case "tea":5    console.log("Tea is ready");6    break;7  case "coffee":8    console.log("Coffee is ready");9    break;10  default:11    console.log("Not on the menu");12}

"juice" matches neither "tea" nor "coffee". So only default runs, and line 11 prints Not on the menu.

This default needs no break, because it is last. After its lines, the switch simply ends. If other cases came after it, it would need a break.

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);

Here size is "large". JavaScript skips the default on line 5, because it still checks every case first. case "large" on line 11 matches, so line 12 sets price to 5, and the code prints 5. Being first did not make default run first.

But default follows the same break rule as every case:

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);

Line by line:

• "medium" matches no case, so default on line 5 runs.
• Line 6 sets price to "unknown".
• There is no break, so the code falls through to case "large".
• Line 8 adds " size" to the end of price.

The code prints unknown size.

The safest fallthrough is a case with no lines of its own, sitting right above another case. Both cases then share one set of lines. Weekend days are a good 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);

case "Saturday" on line 5 has no lines of its own. So the code falls through to case "Sunday" and runs line 7, which sets kind to "weekend". This fallthrough is on purpose, and it is easy to read. The shared lines still end with break on line 8.

A switch inside a function often uses return in each case. return ends the whole function and hands back a value. So it also stops the code from falling into the next case.

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"));

shipping("standard") matches case "standard". Line 6, return 7, ends the function, and the code prints 7. A break after a return would never run, so you don't write one.

You'll use a switch for short lists of exact values, such as:

• keyboard commands, like "copy" or "paste"
• status words, like "loading" or "done"
• page names, display modes, and other fixed labels

If the list grows long, or if it comes from data, the next section shows a shorter way.

Sometimes every case of a switch just gives back a value: "apple means 1.2, banana means 0.5". For that job, an object is often shorter and safer than a switch.

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);

Line by line:

• Lines 1 to 5 make an object called prices. Each line inside the braces pairs a name, called a key, with a value: apple with 1.2, and so on.
• Line 7 stores the key to look for, "banana", in fruit.
• On line 8, prices[fruit] finds the value for that key: 0.5. The square brackets look up the key held in fruit.
• If the key is missing, prices[fruit] gives undefined. Then ?? gives the backup value "unknown". (?? means "use the right side if the left side is null or undefined".)
• Line 9 prints 0.5.

Objects get a full lesson in Stage 3. For now, read the braces as a small table. A related tool, Map, comes later in the Map & Set lesson.

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

Every plain object also has some built-in names that you did not write, such as toString. So if a user types toString, prices[fruit] finds something, even though it is not a fruit.

Object.hasOwn(prices, fruit) on line 7 fixes this. It gives true only when you wrote that key in the table yourself. Here it gives false, so line 9 picks "unknown", and the code prints unknown. Use this check when the key comes from a form, a web address, or a server.

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);

The table below compares three ways to choose. Read each row as a question, then compare the three answers.

Common mistakes

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

Lines 3 and 6 both make a variable called message in the same block. JavaScript stops with a SyntaxError: a mistake in how the code is written, found before it runs.

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}

The { on lines 2 and 7 starts a new block for each case. Now each message lives in its own block, so they don't clash. The code prints alpha.

For the "what does it print?" exercises, don't run the code first. Find the matching case. Then read down until something stops the code. After you answer, paste the code into your console to check.

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 carefully. After you pick an answer, read the explanation under it. That is where the learning happens.

Key takeaways

• A switch reads one value. It compares that value with each case label, the same way === does: same value and same type.
• The code starts at the matching case. It keeps running down until a break, a return, or the end of the switch.
• default runs when no case matches. It can go anywhere, and it falls through too if it has no break.
• Empty cases stacked above one set of lines share those lines. If a case runs its own lines and then falls through on purpose, add a comment.
• Use an object lookup when each key maps straight to a value. Use if / else when each choice asks a different question.

Up next: Loops: while & for. You'll repeat code many times, and you'll see that break can end a loop too.