JS: Switch Statement Explained

Introduction

switch is a conditional statement that will evaluate an expression and execute multiple statements based on the value of the expression.

Think of it as a multi if statement.

Key Parts

1. Expression to evaluate
2. Case blocks
3. (Optional) Default block

Syntax

switch (expressopm) {
    case value1:
        //Statements executed when the
        //result of expression matches value1
        break; // break from further evaluation
    case value2:
        //Statements executed when the
        //result of expression matches value2
        break;
    case valueN:
        //Statements executed when the
        //result of expression matches valueN
        break;
    default:
        //Statements executed when none of
        //the values match the value of the expression
        break;
}

Example

const tellMeTheNumber = (num) => {
    switch(num) {
        case 1:
            console.log("You are number one!");
            break;
        case 2:
            console.log("Second is not a bad place to be.");
            break;
        case 3:
            console.log("Three Three Three");
            break;
        case 4:
            console.log("Quad");
            break;
        default:
            console.log("I don't know who I am anymore?");
            break;
    }
}

tellMeTheNumber(4); // Quad
tellMeTheNumber(1); // You are number one!
tellMeTheNumber(1); // I don't know who I am anymore?

Missing a break?

🚨If we miss a break statement in any case within a switch statement, all the following cases will execute without meeting the criteria.

const tellMeTheNumber = (num) => {
    switch(num) {
        case 1:
            console.log("You are number one!");
        case 2:
            console.log("Second is not a bad place to be.");
        case 3:
            console.log("Three Three Three");
        case 4:
            console.log("Quad");
        default:
            console.log("I don't know who I am anymore?");
            break;
    }
}

tellMeTheNumber(1);
// You are number one!
// Second is not a bad place to be.
// Three Three Three
// Quad
// I don't know who I am anymore?

We asked for case 1 in the above example, and all the cases were missing break statement. It will continue through cases 2, 3, 4, and default without meeting the criteria 1.

Grouping cases

If there are multiple cases in a switch statement, we might want to execute the same action for a subset of these cases. To avoid code duplication, we can group such cases.

const tellMeTheNumber = (num) => {
    switch (num) {
        case 1:
        case 2:
        case 3:
            console.log("You are in top 3");
            break;
        case 4:
            console.log("You did not make it this time");
            break;
        default:
            console.log("I don't know who I am anymore?");
            break;
    }
}

tellMeTheNumber(2); // You are in top 3
tellMeTheNumber(4); // You did not make it this time
tellMeTheNumber(12); // I don't know who I am anymore?

Number 1, 2, or 3 will generate the same message.

Strict type check

The expression evaluated by a switch case statement uses === for equality of value and type. So if we pass the string "3" vs. number 3, you have different results.

const tellMeTheNumber = (num) => {
    switch (num) {
        case 1:
        case 2:
        case 3:
            console.log("You are in top 3");
            break;
        case 4:
            console.log("You did not make it this time");
            break;
        default:
            console.log("I don't know who I am anymore?");
            break;
    }
}

tellMeTheNumber(3); // You are in top 3
tellMeTheNumber("3"); // I don't know who I am anymore?

Since the string "3" did not match any case, the default case was executed.

Block scoping of cases

ES6 or ES2015 allows the use of let and const to create block scope. If we use them in a switch statement, keep in mind that the block is at the level of switch statement and not at the case level.

To have blocks at the case level, wrap the case clauses in brackets.

const tellMeTheNumber = (num) => {
    switch (num) {
        case 1:
        case 2:
        case 3: {
            let message = "You are in top 3";
            console.log(message);
            break;
        }
        case 4: {
            let message = "You did not make it this time";
            console.log(message);
            break;
        }
        default: {
            let message = "I don't know who I am anymore?";
            console.log(message);
            break;
        }
    }
}

tellMeTheNumber(2); // You are in top 3
tellMeTheNumber(4); // You did not make it this time
tellMeTheNumber(12); // I don't know who I am anymore?