JavaScript - Switch Statement - JavaScript Tutorial

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.

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.

JavaScript – Switch Statement

Syntax

Switch Statement Example

kindsonthegenius

Syntax

Switch Statement Example

kindsonthegenius

You might also like

JavaScript – Operators

JavaScript – Loop Control

JavaScript – Events