JavaScript

JavaScript: Switch case

JavaScript: Switch case

In simple programming using multiple statements with the help of if…else if… statements can be helpful and a nor brainer. But, when programming complex JavaScript codes the above mentioned approach is not recommended as the approach can complicate the existing JavaScript code and can also increase the chances of errors. The multiple branch approach is also not recommended when dealing with single variables for many conditions. 

Instead of defining multiple conditions for a single variable you can opt for the switch case approach. As, the switch statements when compared to if…else if… statements are more efficient, less lengthy and take less time to execute. 

The switch statements work by first defining a standard expression. The standard expression is then evaluated on. Then statements are defined for the different required outcomes of the main expression. Depending upon the outcome of the standard expression the statement related is executed. The interpreter analyzes the outcome of the expression and then finds the statements defined for that outcome. In case, no possible matches are found then the default statement is executed. 

Following is the syntax used for Switch statement in JavaScript code:

switch (expression needed to be executed) {
   case  number 1: The Statement that has to be executed
   break;
   
   case number 2: The Statement that has to be executed
   break;
   ...
   
   case number n: The Statement that has to be executed
   break;
   
   default: The Statement that has to be executed
}

There is one problem, the interpreter will keep on executing the statements for each case. There has to be a way to somehow notify the interpreter that the particular case has ended, the respective task is done by introducing break statements. 

Following is an example of a JavaScript code using above mentioned Switch case statements:

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var marks = 5;
            document.write("Programming test<br />");
            switch (marks) {
               case when marks obtained are 5: document.write("Excellent<br />");
               break;
            
               case when marks obtained are 4: document.write("Very Good<br />");
               break;
            
               case when marks obtained are  3: document.write("Poor<br />");
               break;
            
               case 2: document.write("Very Poor<br />");
               break;
            
               case 1: document.write("Not Passed<br />");
               break;
            
               default:  document.write("Error<br />")
            }
            document.write("End test result");
         //-->
      </script>      
   </body>
</html>

The output for the program is:

Programming test

Excellent 

End test result

The importance of break statements can be identified by the following code. 

Following is an example of a JavaScript code using above mentioned Switch case statement with using break statements:

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var marks = 5;
            document.write("Programming test<br />");
            switch (marks) {
               case 5: document.write("Excellent<br />");
               case 4: document.write("Very Good<br />");
               case 3: document.write("Poor<br />");
               case 2: document.write("Very Poor<br />");
               case 1: document.write("Not Passed<br />");
               default: document.write("Error<br />")
            }
            document.write("End test result");
         //-->
      </script>      
   </body>
</html>

The output for the program is

Programming test

Excellent 

Very good

Poor

Very Poor

Not Passed

Error

End test result