fbpx
April 6, 2020
javascript switch case

Introduction to JavaScript Switch Case

In this tutorial we will be discussing about JavaScript Switch case which entails the functions and how to make proper use of switch. In our previous tutorial we discussed about JavaScript if else statement and how to structure them using JavaScript. If you haven’t gone through the tutorial you can do so using the link below.

Read previous tutorial on: Introduction To JavaScript if… Else Statement

JavaScript Switch Case

The JavaScript switch case is a better alternative for the use of multiple if….else statements when performing a multi branch decision based on the outcome of an action. So instead of making use of the multi if…else statements, we can simply make use of switch in JavaScript.

Below is a flow chart that explains how the switch case works

switch case flow chart

Another way to look at the switch case, is that an expression to be evaluated is given, and a list of of possible results or outcome statements are given as well. So after the expression has been evaluated, the switch case goes through all the possibles results statements and picks only the one that matches the outcome of the expression. The syntax for switch case is shown below

switch (expression to be evaluated ) {
   1st case condition : statement(s)
   break;
   
   2nd case condition : statement(s)
   break;
   3rd case condition : statement(s)
   break;
   ...
   
   X case condition : statement(s)
   break;
   
   default: statement(s)
}

note:

The break added to the above codes helps to break the flow after the result have been picked. if this is omitted the interpreter will keep printing out all possible results.

The default block is called only when none of the cases matches the expression in the switch.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SWITCH CASE WITH BREAK</title>
</head>
<body>
   <script>
      var goat = "C";
      document.write('Starting the switch case </br>');
      switch(goat){
         case "A" : document.write('CASE A IS RIGHT </br>');
         break
         case "B" : document.write('CASE B IS RIGHT </br>');
         break
         case "C" : document.write('CASE C IS RIGHT </br>');
         break
         case "D" : document.write('CASE D IS RIGHT </br>');
         break
         default : document.write('NONE IS RIGHT </br>');
      }
      document.write('stopping the switch case');
   </script>
   
</body>
</html>

RESULT

SWITCH CASE WITH BREAK

Example without the break

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SWITCH CASE WITH BREAK</title>
</head>
<body>
   <script>
      var goat = "C";
      document.write('Starting the switch case </br>');
      switch(goat){
         case "A" : document.write('CASE A IS RIGHT </br>');
        
         case "B" : document.write('CASE B IS RIGHT </br>');
         
         case "C" : document.write('CASE C IS RIGHT </br>');
        
         case "D" : document.write('CASE D IS RIGHT </br>');
       
         default : document.write('NONE IS RIGHT </br>');
      }
      document.write('stopping the switch case');
   </script>
   
</body>
</html>

RESULT

SWITCH CASE WITH BREAK

You can see that without the break all options below the right option are printed out with the right option.

CONCLUSION

We hope you fully understand how to use the JavaScript Switch Case and also instances where you will be needing the break.

NEXT TUTORIAL: JAVASCRIPT WHILE LOOP

Leave a Reply

Your email address will not be published. Required fields are marked *