JavaScript – Switch Statement

JavaScript Switch Statement

Previously we discussed if-statement under Conditional Statements. Now, you could have several if-else-if statements. But this is not always the best solution. Hence, there is an alternative to this. That is the Switch Statement.

 

How the Switch Statement Works

You can use the switch statement to  replace repeated if-else-if statements.

The flowchart of the switch statement is given below.

 

Switch Statement Flowchart

 

Syntax

I consists of a switch statement and a number of case statements.

Each case statement is followed by a corresponding block of code (statement). The interpreter checks each case statement against the value of the switch expression. If a match is found, then the particular case statement is executed.

If no match is found for all the case statements, then the default statement is executed.

 

The syntax of the Switch statement is given below.

switch (expression) {
   case condition 1: statement 1
   break;
   
   case condition 2: statement 2
   break;
   ...
   
   case condition n: statement n
   break;
   
   default: default statement
}

 

Also notice the break statement. It’s just a single line. Just one word: break. This is used to exit the switch statement. So once a match is found and the statement is executed, then the break statement exits the switch statement.

 

Switch Statement Example

An example of switch statement is given in the html file below.

 

<html>
<head><title>Switch Statement Example</title></head>
   <body>
   
      <script type = "text/javascript">
         <!--
            var grade = 'B';
            document.write("Entering switch statement block<br />");
            switch (grade) {
               case 'A': document.write("Excellent<br />");
               break;
            
               case 'B': document.write("Very Good<br />");
               break;
            
               case 'C': document.write("Good<br />");
               break;
            
               case 'D': document.write("Fair<br />");
               break;
            
               case 'F': document.write("Fail<br />");
               break;
            
               default:  document.write("Invalid grade<br />")
            }
         //-->
      </script>                  
      
      You can try different values for grade
   </body>
</html>

 

If you view the code above, you will have the output:

 

Entering switch statement block
Very Good
You can try different values for grade 

 

Now, assuming you did not use the break statements? Let’s try it to see what the output will be.

The code without break statements is given below:

 

<html>
<head><title>Switch Statement Example</title></head>
   <body>
   
      <script type = "text/javascript">
         <!--
            var grade = 'B';
            document.write("Entering switch statement block<br />");
            switch (grade) {
               case 'A': document.write("Excellent<br />");
            
               case 'B': document.write("Very Good<br />");
            
               case 'C': document.write("Good<br />");
            
               case 'D': document.write("Fair<br />");
            
               case 'F': document.write("Fail<br />");
            
               default:  document.write("Invalid grade<br />")
            }
         //-->
      </script>                  
      
      You can try different values for grade
   </body>
</html>

 

Now, if you view this page, you will see that it displays the result below. Clearly, this does not make any sense. Because we only have one grade.

 

Entering switch statement block
Very Good
Good
Fair
Fail
Invalid grade
You can try different values for grade 

 

So don’t forget break statement.