The switch statement in JavaScript is used for decision-making. It executes one of multiple code blocks based on a specified condition.

Syntax

    switch(expression or value) {
        case value1:
            // Code executes if expression matches value1
            break;
        case value2:
            // Code executes if expression matches value2
            break;
        case valueN:
            // Code executes if expression matches valueN
            break;
        default:
            // Code executes if no match is found
    }

Example: Using switch with Numbers

    let num = 2;

    switch (num) {
        case 1:
            console.log("Case 1 executed");
            break;
        case 2:
            console.log("Case 2 executed");
            break;
        case 3:
            console.log("Case 3 executed");
            break;
        default:
            console.log("No matching case found");
    }

Example: Using an Expression in switch

    let x = 10;

    switch (x % 2) {
        case 0:
            console.log("Even number");
            break;
        case 1:
            console.log("Odd number");
            break;
        default:
            console.log("Unexpected value");
    } 

Example: switch with Strings

    let fruit = "apple";

    switch (fruit) {
        case "banana":
            console.log("Bananas are yellow.");
            break;
        case "apple":
            console.log("Apples are red or green.");
            break;
        case "orange":
            console.log("Oranges are orange.");
            break;
        default:
            console.log("Unknown fruit");
    }

Example: Combining Multiple Cases

    let grade = "B";

    switch (grade) {
        case "A":
        case "B":
        case "C":
            console.log("You passed!");
            break;
        case "D":
        case "F":
            console.log("You failed.");
            break;
        default:
            console.log("Invalid grade.");
    }

Key Points:

• The switch statement evaluates an expression and executes matching cases.
• The break keyword prevents unwanted execution of subsequent cases.
• If no match is found, the default case executes.
• Expressions, numbers, and strings can be used in switch.
• Multiple cases can share a common execution block.

Difference Between Switch and If...Else in JavaScript

Both switch and if...else statements are used for decision-making in JavaScript. However, they have different use cases based on the complexity and type of conditions.

1. If...Else Statement

The if...else statement is used when you need to evaluate multiple conditions with relational or logical operators.

    let num = 5;

    if (num > 10) {
        console.log("Number is greater than 10");
    } else if (num > 5) {
        console.log("Number is greater than 5 but less than or equal to 10");
    } else {
        console.log("Number is 5 or less");
    }

2. Switch Statement

The switch statement is ideal when evaluating a single expression or literal value with multiple predefined cases.

    let fruit = "apple";

    switch (fruit) {
        case "banana":
            console.log("Bananas are yellow.");
            break;
        case "apple":
            console.log("Apples are red or green.");
            break;
        case "orange":
            console.log("Oranges are orange.");
            break;
        default:
            console.log("Unknown fruit");
    } 

Key Differences

• Condition Type: if...else supports complex conditions with logical operators (&&, ||), while switch compares a single value.
• Performance: switch is generally more efficient than multiple if...else when there are numerous cases.
• Readability: switch is clearer when dealing with multiple fixed values; if...else is better for range-based evaluations.
• Default Case: Both support a fallback condition (default in switch, else in if...else).

When to Use Which?

• Use if...else when evaluating conditions that involve comparisons, logical operations, or ranges.
• Use switch when checking a single value against multiple predefined options.
• For simple expressions, switch may enhance readability, while if...else is more flexible.