Miracle's blog
JavaScript Switch Statements

JavaScript Switch Statements

Ugorji Miracle's photo
Ugorji Miracle
·

4 min read

Decision-making is what everyone does mostly on daily basis. At home, work, school, and everywhere, we are faced with decision-making. It is only possible to make a decision in a situation where there is a display of choices.

Here is a familiar scenario. It's lunchtime at work and you walk to your favorite restaurant. The attendant offers you the menu. On the menu are different delicious cuisine made for special people like you. You go through the menu and choose one or more meals from the menu and have yourself a swell time. That is what switch statements help us do in JavaScript.

In this article, I am going to write how switch statements help us choose between different cases in JavaScript.

Prerequisites

This article is for beginners with prior knowledge of JavaScript if/else statements.

What is a switch statement?

A switch statement is a concept in JavaScript that enables the choice among multiple cases. It is a more efficient way to use multiple if/else checks.

Syntax

switch (expression) {
   case condition 1: statement/value    // if (expression === condition1 then do statement)
   break;

   case condition 2: statement/value     // if (expression === condition2 then do statement)
   break;

   case condition 3: statement/value    // if (expression === condition3 then do statement)
   break;

   default: statement/value   // if (expression === none of the previous conditions then statement)
}

Code example of the switch statement

Let's say you are testing your code on different browsers to check browser support for your code. For each browser, you set the statement to be executed if the code is supported.

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
break;

  case 'Chrome':
     alert("Here is the amazing chrome!");
break;

  case 'Firefox':
      alert("You've got the super Firefox!");
break;

  case 'Safari':
      alert("Here comes the Safari!");
break;

  case 'Opera':
       alert("The opera accepts!");
break;

  default:
    alert( 'Oh my, no browser likes my site' );
}

The browser support checks for case: "Edge" If the browser support matches edge, the browser gives an alert and the code stops running due to the break added. Else, it moves on to the next case. If none of the browsers matches for support, it returns the default statement.

Grouping cases

The ability to group cases is a side-effect of how switch/case works without break. 

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( ''Okay, we all support your site!' );
    break;

  default:
   alert( 'Oh my, no browser supports my site' );
}

In the code example above, cases chrome through opera, are grouped together. Removing the break in between the cases makes them grouped. All the cases get to run one after the other without breaking out. They all have only one value.

Grouped cases with multiple values

Grouped cases can have different values as well. Like in the example below.

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
      alert("I am Chrome!");
  case 'Firefox':
       alert("Firefox here!");
  case 'Safari':
        alert("This is chrome here!");
  case 'Opera':
    alert('Opera supports');
    break;

  default:
   alert('Oh my, no browser supports my site');
}

For the grouped case above, the browser will output all the values of the group. The grouped switch with multiple values helps to choose more than one choice.

Using break

The essence of switch statements is the use of breaks. Without the breaks added to the cases, the cases run all the way. Thereby, defeating the use of the switch statement.

When to use switch statements or if/else statements

Switch statements and if/else statements are relatively the same because they are both used to make choices. Though, each is best suited for some scenarios than the other. I will try to evaluate the scenarios as follows:

  • Clarity in readability: A switch looks much cleaner when you have to combine cases.

  • if/else better for Boolean values:if/else conditional branches are great for variable conditions that result in a Boolean, whereas switch statements are great for fixed data values.

  • Speed: Use switch statements if the number of cases is more than 5 otherwise, you may use if-else statements.

  • Switch statement suitable for more than one choice: In a situation where more than one choice is preferred, the switch is a better choice than an if/else statement.

Conclusion

We can rest assured that JavaScript has got us covered in our conditional choice-making; notwithstanding the number of choices presented to us. I hope this article has made it clearer how to use the switch statement to choose among numerous choices.

If you liked this article, please give your reactions and follow me for more of such beginner-friendly articles.

software developmentJavaScript