JavaScript switch...case Statement

It is not necessary to use the default case in JavaScript. For example,

let country = "Nepal";

switch (country) {
    case "USA":
        console.log("American");
        break;
    case "UK":
        console.log("British");
        break;
    case "Japan":
        console.log("Japanese");
}

console.log("Code after switch statement")

// Output: Code after switch statement

We haven't used a default case in the program above. Moreover, the value of the country variable doesn't match any of the cases in the switch statement.

In such cases, the switch statement is skipped entirely and the program flow goes to the line that comes after the body of the switch statement.

So far, we have used a break statement inside each case block. For example,

case 2:
    console.log("Monday");
    break;

The break statement terminates the execution of switch-case once a matching case has been found.

Without break, the program would continue executing subsequent cases even after finding a match. For example,

let fruit = "banana";

switch (fruit) {
    case "apple":
        console.log("Apple case");
    case "banana":
        console.log("Banana case");
    case "orange":
        console.log("Orange case");       
    default:
        console.log("Unknown fruit");
}

Output

Banana case
Orange case
Unknown fruit

Sometimes, we may want multiple case values to trigger the same block of code. For this, we can use multiple cases with a single block.

Let's look at the example below to understand this clearly.

// Program to categorize age

let age = 19;

switch (age) {

    // when age is 13, 14, or 15
    case 13:
    case 14:
    case 15:
        console.log("Early Teen")
        break;

    // when age is 16 or 17
    case 16:
    case 17:
        console.log("Mid Teen");
        break;

    // when age is 18 or 19
    case 18:
    case 19:
        console.log("Late Teen");
        break;

    // when age is none of the above
    default:
        console.log("Other Age Group");
}

Output

Late Teen

In the above program, we have grouped multiple cases together, which allows us to use a single block of code for all the cases in the group. These groups are:

• cases 13, 14, and 15 - Prints Early Teen to the screen.
• cases 16 and 17 - Prints Mid Teen to the screen.
• cases 18 and 19 - Prints Late Teen to the screen.

Since 19 matches the second case in the third group (case 19), Late Teen is printed as an output.

The JavaScript switch statement performs type checking, ensuring both the value and the type of the expression match the case value. For example,

let a = 1;

switch (a) {
    case "1":
        a = "one (string type)";
        break;
    case 1:
        a = "one (number type)";
        break;
    case 2:
        a = "two (number type)";
        break;
    default:
        a = "not found";
}

console.log(`The value of a is ${a}.`);

Output

The value of a is one (number type).

In the above program, we have assigned an integer value 1 to the variable a. Here,

• case "1" checks if a is the string "1". It evaluates to false because a is not of string type.
• case 1 checks if a is the integer 1. It evaluates to true since both the type and the value of a match against case 1, thus assigning "one (number type)" to a.

Both switch...case and if...else statements are used for decision-making. However, switch...case and if...else are useful in different conditions:

• Use switch for a large number of conditions based on the same expression, which can be more readable than if...else.
• Use if...else for complex logical conditions that can't be easily expressed as discrete cases.

Let's look at two programs that perform the same task, one by using a switch statement and another by using if...else:

// Program using switch statement 

let color = "green";

switch (color) {
    case "red":
        console.log("Stop");
        break;
    case "yellow":
        console.log("Caution");
        break;
    case "green":
        console.log("Go");
        break;
    default:
        console.log("Invalid color");
}

// Output: Go

In the above program, the color variable is strictly compared against each case. When it matches the case "green", Go is printed as output.

// Program using if...else statement

let color = "green";

if (color === "red") {
    console.log("Stop");
}
else if (color === "yellow") {
    console.log("Caution");
}
else if (color === "green") {
    console.log("Go");
}
else {
    console.log("Invalid color");
}

// Output: Go

Here, the if...else statement checks the value of color against various conditions.

When color matches "green", the corresponding block executes, printing Go as the output.