The JavaScript Switch Statement

Introduction

Something I am trying to get in the habit of using when I do not need complicated if-else statements are switch statements. Switch statements are great for comparing multiple options such as in the case of checking if a string matches a certain word or number. One example that comes to mind is a card game. You can check if your value is equal to a “J”, “K”, etc., and depending on the match, have the switch statement do something. Let’s get started on this tutorial.

Code

For the switch statement to work, we have to write the keyword switch and inside of the parenthesis, we give it an argument that we want to be compared. The switch statement works with strict equality so if you are expecting to compare values in the way that you would use == , I would go ahead and use a regular if-else statement.

We then use the keyword case followed by the value you are looking for and end it in a colon. EX:case “<insertValueHere>”: . We must then end the conditional with a break statement. THIS IS ONE OF THE MOST IMPORTANT PARTS. I will show you what happens if you forget this.

The skeleton of the switch should look like this:

switch(val){
case "someValueHere":
//execute some functionality here
break;
}

I created an example similar to the one I mentioned in the intro:

In this example, I am using the card variable which has a value of “King”. The alertMess function is strictly to call the alert method to the user based upon the match and that will be invoked through the switch statement itself.

As you can see on line 8, I write case “King”: and since that matches the card variable I have on line 1, I will get an alert message:

Image for post
Image for post

You might be wondering what is happening on lines 14 and 15?

If you have multiple cases that will execute the same function/code, then you don't have to create individual case statement sections with break statements for each one. Instead, you can write all the cases out that meet a condition and then add the code that does something, followed by the break.

The skeleton for multiple cases will look like this:

switch(val){
case "valueOne":
case "valueTwo:
//execute some functionality here
break;
}

This way if our card value is either an empty string‘’ or “Joker”, then it will output the same message regardless of which one it is.

Now, I want to show you what happens if you forget to putbreak statements.

I got rid of the break statement on line 10 and went straight into the next case. Let’s see what happens.

Image for post
Image for post

Without the break, the code continues executing until it encounters a break statement. It matches the “King” case, we get an alert message, but then goes to the next case because we omitted the break and gives us another alert. We do not get another alert after the “Queen” case because the “Queen” does have a break statement and so it tells the switch to stop running.

Another great thing about the switch statement is that it also has a default functionality. This works similarly to your else statement. If the value that you have in parenthesis does not match any of the cases, and you have added in the default keyword, then the default value will be returned.

I have now changed the card variable to have a value of “Cat” which does not match any of our cases, so it will hit the default case.

Image for post
Image for post

We get the message, “Your card is Nothing” which is what I put for the output to be on line 19. If you omit the default statement, however, nothing will be executed.

Conclusion

I hope that was helpful and that you try using switch statements in your code. Check out the documentation on → switch statements.

Written by

Software Developer && Political Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store