JavaScript switch Statement

The switch statement evaluates an expression or value and executes the matching case.

let fruit = "apple";

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

// Output: It's an apple!

Here, the value of fruit is "apple", which matches the case "apple". Thus, the code inside case "apple" is executed.

---

Syntax of switch

The basic syntax of the switch statement in JavaScript is:

switch (expression) {
    case value1:
        // statement(s)
        break;

    case value2:
        // statement(s)
        break;

    ...

    default:
        // default statement(s)
}

Here,

• If the value of the expression matches any of the specified values (e.g., value1, value2, etc.), the corresponding statement(s) for the matching case are executed.
• If no match is found, the default case is executed.
• The break statement marks the end of the corresponding case.

---

JavaScript switch...case Flowchart

---

Example: switch Without break

The break statement is optional in a switch statement. However, omitting it can lead to unintended behavior.

Let's see what happens when we remove break from the previous example:

let number = 42;

switch (number) {
    case 29:
        console.log("Small");

    case 42:
        console.log("Medium");

    case 44:
        console.log("Large");

    case 48:
        console.log("Extra Large");

    default:
        console.log("Unknown");
}

Output

Medium
Large
Extra Large
Unknown

When we remove the break statements from each case, once a case matches, the execution continues through the rest of the switch statement, regardless of whether the other cases match or not.

This behavior is called fall-through, as the execution "falls through" to the subsequent cases in the switch statement.

By including break, we prevent fall-through, ensuring that only the matching case is executed.

---

Using Multiple Cases in switch

JavaScript allows combining multiple cases to execute the same block of code.

Let's look at an example.

let day = "Saturday";

switch (day) {
    case "Saturday":
    case "Sunday":
        console.log("It's a weekend!");
        break;
    default:
        console.log("It's a weekday.");
}

// Output: It's a weekend!

In this example, both "Saturday" and "Sunday" cases execute the same code block.

---

Using Conditions in switch Statements

In JavaScript, switch cases can also be used with conditional expressions, making them more flexible for handling complex scenarios.

let score = 75;

switch (true) {
    case score >= 90:
        console.log("Grade: A");
        break;
    case score >= 75:
        console.log("Grade: B");
        break;
    case score >= 60:
        console.log("Grade: C");
        break;
    default:
        console.log("Grade: F");
}

// Output: Grade: B

Here, the switch evaluates the true condition, and the case that matches executes the associated statement.

---

Takeaway

The switch statement is a useful tool for handling multiple conditions in JavaScript. To ensure proper execution:

• Always use break after each case unless you want to allow fall-through behavior.
• Use the default case to handle unexpected values.

By mastering switch, you can write clean, efficient, and readable code for decision-making in your JavaScript programs.