JavaScript switch Statement

Last Updated : 22 Aug, 2024

The JavaScript switch statement evaluates an expression and executes a block of code based on matching cases. It provides an alternative to long if-else chains, improving readability and maintainability, especially when handling multiple conditional branches.

Table of Content

Switch Statement Syntax

switch (expression) {
    case value1:
        // code block 1;
        break;
    case value2:
         // code block 2;
        break;
   ...
    default:
       // default code block;
}

Expression is the value that you want to compare.
Case value1, case value2, etc., represent the possible values of the expression.
break statement terminates the switch statement. Without it, execution will continue into the next case.
Default specifies the code to run if none of the cases match the expression.

How Switch Statement Works

Evaluation: The expression inside the switch the statement is evaluated once.
Comparison: The value of the expression is compared with each case label (using strict equality ===).
Execution: If a match is found, the corresponding code block following the matching case the label is executed. If no match is found, the execution jumps to the default case (if present) or continues with the next statement after the switch block.
Break Statement: After executing a code block, the break statement terminates the switch statement, preventing execution from falling through to subsequent cases. If break is omitted, execution will continue to the next case (known as “fall-through”).
Default Case: The default case is optional. If no match is found, the code block under default is executed.

Flowchart of Switch Statement

Switch Statement Example:

Here, we will print the day name on day 3.

JavaScript

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    case 4:
        dayName = "Thursday";
        break;
    case 5:
        dayName = "Friday";
        break;
    case 6:
        dayName = "Saturday";
        break;
    case 7:
        dayName = "Sunday";
        break;
    default:
        dayName = "Invalid day";
}

console.log(dayName); // Output: Wednesday

Output

Wednesday

Explanation:

Day is set to 3.
The switch statement evaluates day.
Since day is 3, the case 3 the block is executed, assigning "Wednesday" to dayName.
The break statement ends the switch statement, preventing execution from continuing into other cases.

Switch Statement Example:

Here, we will check our grade by using a switch case.

JavaScript

let grade = 'B';
let result;
switch (grade) {
    case 'A':
        result = "A (Excellent)";
        break;
    case 'B':
        result = "B (Average)";
        break;
    case 'C':
        result = "C (Below than average)";
        break;
    default:
        result = "No Grade";
}
console.log(result);

Output

B (Average)

Explanation:

Grade is assigned the value 'B'.
The switch statement evaluates the value of grade.
Since grade is 'B', the code block following case 'B': is executed.
The result the variable is assigned the string "B (Average)".
The break statement terminates the switch statement.
result is logged to the console, which outputs "B (Average)".

Break Keyword

The break the keyword is used to terminate the execution of a loop or a switch statement.

default Keyword

The default the keyword is used within a switch statement as a fallback option when none of the case expressions match the value being evaluated. It acts similarly to the else statement in an if...else chain, providing a default action to take when no other specific cases match.

Position of default case does not matter:

Regardless of its placement, the default case only gets executed if none of the other case conditions are met. So, putting it at the beginning, middle, or end doesn’t change the core logic (unless you’re using a less common technique called fall-through).

we will print the default case.

JavaScript

let day = 8;
let dayName;

switch (day) {
    default:
        dayName = "Invalid day";
        break;
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    case 4:
        dayName = "Thursday";
        break;
    case 5:
        dayName = "Friday";
        break;
    case 6:
        dayName = "Saturday";
        break;
    case 7:
        dayName = "Sunday";
        break;
    
}

console.log(dayName);

Output

Invalid day

Common Code Blocks

In some cases, we need to use the same code for multiple switch cases. Let’s see an example of how to do it:

Common Code Blocks Example:

Here, we will same code blocks for two different switch cases.

JavaScript

let grade = 'A'
let result;

switch (grade) {
    case 'A':
        result = "Grade is excellent"
        break;
    case 'B':
        result = "Grade is good"
        break;
    case 'C':
        result = "Grade is Average "
        break;
    case 'D':
        result = "Grade is Poor"
        break;
    default:
        text = "NO grades achieved";
}
console.log(result)

Output

Grade is excellent

Explanation:

Grade is assigned the value 'A'.
The switch statement evaluates the value of grade.
Since grade matches 'A', the code block following case 'A': is executed, setting result to "Grade is excellent".
The break statement terminates the switch statement.
Result is logged to the console, which outputs "Grade is excellent".

Note: If multiple switch cases match a value, the first is executed.