JavaScript Switch

The switch statement compares one value against a list of possible matches and runs the code for the one that fits. When you find yourself writing else if (day === ...) over and over with the same variable, a switch is usually cleaner and easier to read.

// Syntax

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

This is how it works:

1. The switch expression is evaluated once
2. Its value is compared with the value of each case, top to bottom
3. If there is a match, that case's code runs
4. If nothing matches, the default code runs (if there is one)

Notice the punctuation: each case value is followed by a colon, not braces, and the whole thing is wrapped in one pair of braces.

// A Working Example

This turns a weekday number into its name. JavaScript numbers the days 0 to 6, starting with Sunday:

let dayNum = 2;
let day;

switch (dayNum) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
console.log(day);

// The break Keyword

When JavaScript reaches break, it jumps out of the switch. No more code inside it runs.

Without break, something surprising happens: after a match, JavaScript keeps going and runs the code of the following cases too, even though their values do not match. This is called fall-through:

let level = 2;

switch (level) {
  case 1:
    console.log("one");
  case 2:
    console.log("two");        // match starts here...
  case 3:
    console.log("three");      // ...and falls through
  default:
    console.log("default");    // ...all the way down
}

// The default Keyword

default is the code to run when no case matches. It works like the final else in an if...else if chain:

let dayNum = 3;
let text;

switch (dayNum) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the weekend";
}
console.log(text);

A few rules about default:

• It is optional. With no default and no match, nothing in the switch runs, and the program carries on after it
• It does not have to be last. It is still only used when no case matches, wherever it sits
• If it is not last, end it with break, or it falls through into the case below it

// Sharing Code Between Cases

Fall-through is occasionally what you want. Stack several case labels with no code between them, and they all share the next block:

let dayNum = 5;
let text;

switch (dayNum) {
  case 4:
  case 5:
    text = "Soon it is the weekend";
    break;
  case 0:
  case 6:
    text = "It is the weekend";
    break;
  default:
    text = "Looking forward to the weekend";
}
console.log(text);

Here 4 and 5 (Thursday and Friday) share one block, and 0 and 6 (the weekend) share another. This is the one form of fall-through that is clearly intentional, because there is no code between the grouped labels.

// Strict Comparison

switch compares using strict equality (===). The value and the case must be the same type to match:

let x = "0";      // a string
let text;

switch (x) {
  case 0:          // a number: no match
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
console.log(text);

Two more details: if more than one case has the same value, only the first is used. And the case values do not have to be plain numbers or strings; they can be any expression, though simple values are by far the most common.

// switch vs if...else if

// Quick Check

let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("red");
  case "banana":
    console.log("yellow");
    break;
  default:
    console.log("unknown");
}

// Try It

▶ Open Playground

1. Click Open Playground. Write a switch on season with four cases ("spring", "summer", "fall", "winter") and a default
2. Remove one break and run it to watch the fall-through. Put it back
3. Use stacked cases so that 0 and 6 print "weekend" and every other day prints "weekday"
4. Set your switch value to the string "1" with case 1:. Confirm it does not match, then fix it with Number()