JavaScript switch...case Statement


In JavaScript, the switch...case statement provides a more readable and efficient way to handle multiple possible conditions compared to using multiple if...else statements. It evaluates a single expression and compares it against different possible case values, executing the code block associated with the matching case.


1. What is the switch...case Statement?

The switch...case statement is used to evaluate an expression and execute one of several code blocks based on the expression’s value. It is often used when you have multiple potential values for a single variable, and you want to execute different code depending on the specific value.

Syntax of the switch...case Statement:

switch (expression) {
  case value1:
    // Code block executed if expression === value1
    break;
  case value2:
    // Code block executed if expression === value2
    break;
  default:
    // Code block executed if no case matches
}
  • expression: The value you want to compare against.
  • case value:: Each case specifies a value to compare with the expression. If there’s a match, the corresponding code block is executed.
  • break: Exits the switch statement after the matching case is executed. Without it, the program continues executing subsequent cases (fall-through behavior).
  • default: The optional default case, which is executed if no case matches.

2. Simple Example of the switch...case Statement

Let’s look at a simple example where we evaluate the day of the week using a switch...case statement and print the corresponding name of the day.

Example 1: Basic switch...case Example

let day = 2;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // Output: Tuesday

Explanation:

  • The value of day is compared against each case value.
  • Since day equals 2, the code under case 2 is executed, and dayName is set to "Tuesday".
  • The break statement ensures that the switch statement terminates after the matching case is executed.
  • If no case matches, the default block is executed.

3. The Importance of break in switch...case

Without the break statement, the program will continue to execute the code in the subsequent cases, even if the value has already matched a previous case. This is known as fall-through behavior.

Example 2: Fall-Through Behavior Without break

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
  case 2:
    dayName = "Tuesday";
  case 3:
    dayName = "Wednesday";
  case 4:
    dayName = "Thursday";
  case 5:
    dayName = "Friday";
  case 6:
    dayName = "Saturday";
  case 7:
    dayName = "Sunday";
  default:
    dayName = "Invalid day";
}

console.log(dayName); // Output: Wednesday

Explanation:

  • In this example, there are no break statements, so the program falls through to all subsequent cases after the match is found.
  • When day is 3, the program starts with case 3 and executes it, but because there are no break statements, it continues to execute all subsequent cases, ultimately setting dayName to "Sunday".
  • To prevent this, you should always use the break statement after each case.

4. Using default in the switch...case Statement

The default case is optional but highly recommended. It acts as a fallback when none of the case values match the expression. If a matching case is not found, the default block is executed.

Example 3: Using default in switch...case

let grade = "A";
let result;

switch (grade) {
  case "A":
    result = "Excellent";
    break;
  case "B":
    result = "Good";
    break;
  case "C":
    result = "Average";
    break;
  case "D":
    result = "Poor";
    break;
  default:
    result = "Invalid grade";
}

console.log(result); // Output: Excellent

Explanation:

  • The switch statement checks the value of grade.
  • Since grade equals "A", the program executes the case "A" block and sets result to "Excellent".
  • If no valid grade had been provided, the default case would have been executed.

5. Using Multiple case Values in the Same Block

You can combine multiple values in a single case statement, which is useful when multiple values should trigger the same behavior.

Example 4: Multiple case Values in One Block

let day = 2;
let dayName;

switch (day) {
  case 1:
  case 2:
  case 3:
    dayName = "Weekday";
    break;
  case 4:
  case 5:
    dayName = "Weekend";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // Output: Weekday

Explanation:

  • In this example, if day is 1, 2, or 3, the program will execute the same code block and set dayName to "Weekday".
  • If day is 4 or 5, dayName will be set to "Weekend".
  • This method eliminates the need to repeat the same code for multiple values.

6. Using Expressions in switch...case

You can use expressions in a switch statement, but it will evaluate only the final result of the expression, not the individual components.

Example 5: Using Expressions in switch...case

let num = 7;

switch (true) {
  case (num > 0 && num <= 5):
    console.log("Between 1 and 5");
    break;
  case (num > 5 && num <= 10):
    console.log("Between 6 and 10");
    break;
  default:
    console.log("Out of range");
}

Explanation:

  • In this example, we are switching on the result of boolean expressions.
  • The switch (true) evaluates each case, and the first true condition (num > 5 && num <= 10) matches and executes the corresponding block, printing "Between 6 and 10".