JavaScript Switch Statement

How does the switch statement work?

• The switch statement checks an expression inside parentheses ().
• Compare the result with the value 1, Value 2, and so on.. in the case branches from top to bottom. The switch statement uses strict comparison (===).
• Execute the statement in the case branch, where the result of the expression equals the value that follows the case keyword.
• If the break statement is executed, the switch statement ends. The break statement is entirely optional. 
• If the Break statement is not used, the cases after the matching case are also executed.
• The default clause is also optional.
   

The switch statement evaluates an expression, compares its result with the case values, and then executes the statement associated with the matching case.

Flowchart of Switch Statement

A flowchart for a switch statement illustrates the decision-making process that occurs when a program evaluates multiple possible paths based on the value of a variable. Here's a general breakdown of the flowchart for a switch statement:

1. Start: The process begins.
2. Evaluate Expression: The value of the expression or variable is evaluated.
3. Match Case: The value is compared against each case value in the switch statement.
4. Case Matched: If a match is found, the corresponding block of code is executed.
5. Default Case: If no cases match, the default block of code (if provided) is executed.
6. End: The switch statement ends, and control passes to the subsequent code.

Start
  |
  V
Evaluate Expression
  |
  V
+--------------------+
| Case 1: Compare    |
| Expression with    |
| Case 1 Value       |
+--------------------+
  |
  V
+--------------------+    No +------------------+
| Match Found?       |-----> | Case 2: Compare  |
+--------------------+       | Expression with  |
  | Yes                      | Case 2 Value     |
  V                          +------------------+
Execute Case 1 Code          |
  |                          |
  V                          V
+--------------------+    No +------------------+
| End                |-----> | Case 3: Compare  |
+--------------------+       | Expression with  |
                             | Case 3 Value     |
                             +------------------+
                                |
                                V
                              +--------------------+
                              | Default Case:      |
                              | Execute if no case |
                              | matches            |
                              +--------------------+
                                |
                                V
                              +--------------------+
                              | End                |
                              +--------------------+

Understanding the switch statement

Let us go through some examples which will help us understand more clearly about the switch statement in Javascript.

Example 1: Switch statement to get the day of the week (JavaScript).

• Javascript

Javascript

var day = 5;
 let dayName;

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

You can also try this code with Online Javascript Compiler

Run Code

Output:

  Thursday

• We have declared the day variable that holds the day number and the day name variable (dayName).
• Using the switch statement, we can get the day of the week based on the day number. If the day is 1, the day of the week is Sunday. If the day is 2, the day of the week is Monday, and so on.
• Output the day of the week to the console.

Example 2: Switch statement With Multiple Case.

• Javascript

Javascript

// multiple case switch program

 var fruit = 'apple';
 switch(fruit) {
    case 'apple':
    case 'mango':
    case 'pineapple':
    	console.log(`Fruit available on cart.`);
    break;
    default:
    	console.log(`This is not in our cart.`);
    break;
}

You can also try this code with Online Javascript Compiler

Run Code

Output:

 Fruit available on cart

• In the above code, multiple case statements are grouped.
• All the grouped cases share the same code.
• If the value of the fruit variable has the value mango or apple, the output will be the same.

Example 3: What if we forget to write break?

• Javascript

Javascript

 var age = 18;
 switch (age) {
    case 16:
    	console.log('Not allowed you are 16');
    break;
    case 18: 
    	console.log('Allowed your age is 18');
               // NOTE: the forgotten break would have been here
    case 19:  
    	console.log('Allowed your age is 19');
    break;  
    case 20:
    	console.log('You are 20');
    break;
    default:
    	console.log('default');
 }

You can also try this code with Online Javascript Compiler

Run Code

Output:

  Allowed your age is 18
  Allowed your age is 19

• Since Condition matches the case statement, age is 18; criteria are met here, so the block of code will be executed.
• There is no break statement in 'case:18', so the next case will run.
• After case:19, it encounters the break, so it will not continue into 'case:20'.
   

Check out this article - Balanced Parentheses

Frequently Asked Questions

Find the output of the code:

    var price = 6;
    switch (price) {
        case 2: console.log("It is: 2");
        default:console.log("It is: default");
        case 5: console.log("It is: 5");
        case 9: console.log("It is: 9");
    }
}

You can also try this code with Online Javascript Compiler

Run Code

Ans:

It is: default
It is: 5
It is: 9

What are the drawback of a switch-case statement?

Disadvantages of switch statements are:

1. We cannot use the float constant in the switch as well as in the case.
2. We cannot use the variable expression in case.
3. We cannot use the same constant in two different cases.
4. We cannot use the relational expression in case.

Can you nest switch statements Javascript?

We can use a nested switch statement, but that can quickly become a spaghetti code, and therefore, it is not recommended. We can instead use functions with the nested switch statement for code clearance or use a recursive function depending on what the code is supposed to do.

Should switch statements always have a default clause?

Ans: No, it should usually contain a default clause. Involving a default clause only makes sense if there's something to do, such as asserting an error condition or providing a default behaviour.

Conclusion

In this article, we have discussed JavaScript Switch Statement. The JavaScript switch statement is a powerful tool for handling multiple conditions in a clear and organized manner. By evaluating an expression and executing code based on different possible values, it simplifies complex conditional logic and improves code readability. With its ability to handle multiple cases efficiently and provide a default option for unmatched cases, the switch statement is an essential construct for developers working with decision-making processes in JavaScript.

If you are pursuing a new career in Web Development, we suggest you get your fundamentals crystal clear with our Full Stack Development course. 

Happy Learning, Ninja!

This course will help you!