JavaScript Switch Case with Example – Learn in 12 Mins

JavaScript Switch Case Statement use for a value to change control of execution. It is an easy way to dispatch execution to different parts of code based on the value of the expression. The definition clearly shows us the working of Switch cases, but how are these statements used in JavaScript? So, we will explore the working with an example of a switch case in JavaScript.

What is JavaScript Switch Case Statement?

The JavaScript switch case statement is used for decision-making purposes. Using if-else statements for this purpose will be less efficient over switch case statements and also it will make the code look complex.

The switch case in JavaScript is a multi-way branch statement.

The Syntax of JavaScript Switch Case

switch(expression) 
{
case value 1:
        statement1;
        break;
case value 2:
        statement2;
        break;
case value N;
        statementN;
        break;
default: statement default;

You must learn about JavaScript Syntax and implemenation of code

Execution Flow of Switch Cases Statement

Explore the Architecture of JavaScript

Example

let a = 2+ 2;
Switch (a) {
 Case 1:
    alert( “Too small”);
    Break;
Case 2:
    alert(“exactly”);
    Break;
Case 3:
    alert(“Too large”);
    Break;
Default:
alert(“I don’t know such values”);
}

Here, the switch starts to compare ‘a’ from first case variant that is 1. Then, the match fails. Then 2. That’s a match, so the execution starts from case 2 until the nearest break.

If there is no break then the execution continues with the next case without any choice.

Both switch and case allow arbitrary expressions.

Example

let a = “1”;
 Let b = “0”;
switch(+a) {
    case b+1:
      alert(“this runs”);
     break;
default:
    alert(“this doesn’t run”);
}

Here, ‘+a’ gives 1, that’s compared with ‘b+1’ in a case and the corresponding code executed.

Recommended reading – Javascript classes

Grouping of Case in JavaScript Switch Case

Grouping can be done on the variant of the similar type.

Example

let a = 2 + 2;
switch(a) {
  case 1:
    alert( ‘right’);
    break;
  case 2:
  case 3:
    alert(‘wrong’);
alert(‘why don’t you take a math class?’);
break;
default:
  alert(‘The result is strange: really’);
}

Note ‘2’ and ‘3’ show the same message. The ability to “group” cases is the effect of how switch/case works without break. Here, the execution of case 3 starts from line(*) and goes through case 5, because there is no break.

Importance of Type in Switch Case

The values should be of the same type to match.

Example

let arg = prompt (“enter a value?”);
switch(arg) {
  case ‘0’:
  case ‘1’:
    alert(‘one or zero’);
    break;
  case ‘2’:
    alert(‘two’);
    break;
  case ‘3’:
    alert(‘never executes’);
   break;
default: 
    alert(“An unknown value”);
}

1. For 0, 1 and the first alert runs.
2. For 2 the second alert runs.

Follow this link to know about the JavaScript object

The Break Keyword

We have already seen the use of break for each statement. This causes the statements to ‘break out’ of the JavaScript switch statement and continue to the next block of code.

In other words when a match is found, then the break statement is encountered.

If you would like multiple matches to bigger code blocks then the break statement would stop that from happening.

JavaScript Switch with Multiple Cases and Same Code

There are many cases where a range is not the right solution, but you need to apply the same execution to multiple values.

Instead of creating a complicated statement with multiple expression evaluations you can ‘stack’ the cases.

Example

var my-day = new Time();
switch(my - Time .getTime())
{
case 0 : console.log(“ Welcome to Time Schedule”);
         break;
case 1 :
case 2:
case 3:
case 4:
case 5:
 console.log( “It’s early morning”);
case 6: console.log(“ Morning Vibes at 4:00 A.M”);
         break;
}

Output:

Welcome to Time Schedule

Its early morning

Morning vibes at 4:00 A.M

Read about – 10 Essential Applications of JavaScript

Summary

Switch case statements are the fundamental pattern, which can be seen in every language. Developers can use the JavaScript switch case to replace complex if-else statement. From the above article, we learned three things, if multiple cases match a case value, so the first case will select. If no match cases are found, so the program continues to the default label. Lastly, if no default label is found, so the program will continue to the statement after the switch.

Hope, you liked the explanation. Post your queries and suggestions, into the comment box.