JavaScript Switch

The switch statement is used to perform different actions based on different conditions. It’s a cleaner alternative to multiple if...else if statements, especially when you have many conditions to check.

1. Basic Syntax of Switch:

switch (expression) {
    case value1:
        // Code to execute if expression === value1
        break;
    case value2:
        // Code to execute if expression === value2
        break;
    default:
        // Code to execute if expression doesn't match any case
}

Try It Now

  • expression is the value you want to evaluate.
  • case value: defines a value to compare against the expression.
  • break; stops the execution of the switch statement and prevents it from running the following cases.
  • default: defines code that runs if none of the case values match the expression.

Example:

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

Try It Now

Explanation:

  • The expression day = 3 is compared with each case. When day equals 3, "Wednesday" is printed.

 

2. Switch Without Break:

If you omit the break statement, JavaScript will continue executing the following cases even if a match is found. This is called “falling through.”

Example:

let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("It's an apple");
    case "banana":
        console.log("It's a banana");
    case "orange":
        console.log("It's an orange");
    default:
        console.log("Unknown fruit");
}

Try It Now

Explanation:

  • Since there’s no break, JavaScript will “fall through” and print all the messages, even after the match for "apple" is found.
  • To prevent this, you should always use break unless you want fall-through behavior.

 

3. Switch with Multiple Cases:

You can group multiple cases together to execute the same code for different values.

Example:

let number = 2;
switch (number) {
    case 1:
    case 2:
    case 3:
        console.log("Number is between 1 and 3");
        break;
    default:
        console.log("Number is not between 1 and 3");
}

Try It Now

Explanation:

  • The code "Number is between 1 and 3" will be printed because the number matches with 2 (which is grouped with 1 and 3).

4. Switch with Expressions:

You can use expressions in a switch statement instead of just constants.

Example:

let x = 5;
switch (true) {
    case (x > 0 && x < 10):
        console.log("x is between 0 and 10");
        break;
    case (x >= 10 && x < 20):
        console.log("x is between 10 and 20");
        break;
    default:
        console.log("x is out of range");
}

Try It Now

Explanation:

  • The switch(true) checks each condition and matches the first case where the condition evaluates to true.

Conclusion:

  • The switch statement provides an easier way to test multiple conditions compared to multiple if...else statements.
  • Use the break statement to stop the execution after a matching case is found.
  • Fall-through behavior occurs if you omit break after a case.
  • The switch statement can also evaluate expressions, making it versatile for various conditions.