In this section, we will learn what the switch statement is and how to use it in JavaScript.

What is Switch Statement in JavaScript?

When we have an input and, based on the actual value of that input, we want to run a specific block of code, we can use the `switch` statement.

The switch statement is like a shorter version of the `if-else` statements with multiple `else-if` conditions in between.

Switch Statement Syntax

switch (expression){
    case value1:
    //body…
    case value2:
    //body…
    case value_N:
    //body…
    default:
    //body…
}

`switch`: First, to create a `switch` statement, we start with the keyword `switch`.

`( )`: after the keyword `switch` comes the parentheses `()` and inside it we set the input value that we want to check.

`{ }`: the body of the `switch` statement starts from the opening brace `{` and ends right at the closing `}` brace.

`case`: each `case` statement is a checkpoint where we put a value. This value will be checked against the input (that is set within the parentheses of the `switch` statement) and if they matched, the body of that `case` statement will run.

Also, the body of a `case` statement starts after the colon `:` and ends right before the next `case` statement or the `default` statement.

Notes:

1. Depending on the design of the switch statement, we can put one or more `case` statement.
2. Within the body of each `case` statement, we need to use either `break` or ` return` statement to end the execution of the body of the `switch ` statement and jump out.

If we use the `break` statement, the execution engine will run the instructions after the body of the switch statement (it means still in the same scope that the `switch` statement is).

But if we use the `return` statement instead, that means a return from not just the body of the `switch` statement but also from the scope (function or block) that this statement is in.

Notes:

• If we don’t use either `return` or `break` statement, the execution engine will run the body of entire cases after the one that actually matched the input. This is true even if those cases do not match the input value.
• In the `break` statement section, we’ve explained how this statement works. Also, you can check the `return` statement section to learn about this statement as well.

`default`: the use of `default` statement is like using `else` statement in the `if-else`. The body of this statement will only run if none of the `case` statements match the input value.

JavaScript Switch Case

Basically, the switch statement takes an argument, and it compares that value with multiple (one or more) `cases`. The `case` in the body of `switch` plays the role of `else if` statement in the `if` condition.

In the body of the `switch` statement, we define multiple `cases` and each case has its own body. The input argument of the `switch` statement will be compared to the value of each `case` and if they matched, then the body of that `case` will be executed.

For example, there’s a value that a user has entered, but we don’t know what that is. All we know is that the value is probably the string value “Red”, “Green”, or “Blue”.

So we can define a switch statement with 3 cases (or 3 blocks of instructions) for each of these values. Now the execution engine will take the input of the `switch` statement and compare it with the value of each of these cases and if one matched, the execution engine will execute its body.

Switch Case break

We mentioned that after a case statement in a switch matched the input value of the switch, its body will be executed.

After that, we need to exit the switch statement and this is done using the `break` statement.

When the execution engine sees the `break;` statement it will return from the target case as well as the enclosing switch statement.

Example: using switch case in JavaScript

const iVal = 3;
switch (iVal){
    case 1:
        console.log("Hello");
        break;
    case 2:
        console.log("Good Morning");
        break;
    case 3:
        console.log("Good Bye");
        break;
    default:
        console.log("unknown value");
        break;
}

Output:

Good Bye

In this example, we used the value of the `iVal` variable as the value of the `switch` statement.

The execution engine will first check the input in the first case. The value of the first case is 1 but the input value is 3 so they don’t match and the execution engine will move towards the second case. In the second case, the value is 2 but again, because the input value is 3, the execution engine ignores this case as well and moves towards the third case.

In the third case, the values matched and so the engine moved into the body of this case and executes its instructions.

(Because the last statement in this body is the call to the `break;` the execution engine after this statement moved out of the body of the `switch` statement.)

Note: for this particular example, there’s no instruction after the body of the switch statement and so after the call to the break statement, the program terminated as well.

JavaScript Switch default

As mentioned before, the default statement is like the `else` statement in an if statement. It will run when no other cases in the target switch statement matched the input value.

Note: remember that the use of `default` statement is optional.

Also, as you can see, the body of the `default` statement in the example above didn’t run because the third `case` statement matched the input value and so there’s no need to run the body of the `default`.

Example: using switch default in JavaScript

const iVal = 4;
switch (iVal){
    case 1:
        console.log("Hello");
        break;
    case 2:
        console.log("Good Morning");
        break;
    case 3:
        console.log("Good Bye");
        break;
    default:
        console.log("Unknown Value");
        break;
}

Output:

Unknown Value

JavaScript Switch Multiple Case

We can also put multiple `case` statements under each other and define only one body for them.

Example: creating switch with multiple case in JavaScript

const value = 3;
switch (value){
    case 1:
    case 2:
    case 3:
        console.log(" The input value is in range of 1-3 inclusive ");
        break;
    case 4:
    case 5:
    case 6:
        console.log(" The input value is in range of 4-6 inclusive ");
        break;
    default:
        console.log("The range of the input value is unknown");
        break;
}

Output:

The input value is in range of 1-3 inclusive

In this example, the first 3 `case` statements have one body and any of these cases that matches the input will cause the execution engine to run this body. Also, the last 3 `case` statements have only one body.

JavaScript Switch Case String

Let’s run an example and this time put a string value as the input argument of the switch statement.

Example: using string in switch case

const iVal = "Ian";
switch (iVal){
    case "Omid":
        console.log("The name is Omid");
        break;
    case "Jack":
        console.log("The name is Jack");
        break;
    case "Ian":
        console.log("The name is Ian");
        break;
    default:
        console.log("unknown value");
        break;
}

Output:

The name is Ian