JavaScript switch Statement

The switch statement in JavaScript, is used to execute some block of code, when the case value matches the expression value. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <button onclick="myFun()">What Day is Today?</button>
   <p>Today is: <span id="day">________</span></p>
   <script>
      function myFun()
      {
         let d;
         switch(new Date().getDay())
         {
            case 0:
               d = "Sunday";
               break;
            case 1:
               d = "Monday";
               break;
            case 2:
               d = "Tuesday";
               break;
            case 3:
               d = "Wednesday";
               break;
            case 4:
               d = "Thursday";
               break;
            case 5:
               d = "Friday";
               break;
            case 6:
               d = "Saturday";
               break;
         }
         document.getElementById("day").innerHTML = d;
      }
   </script>
   
</body>
</html>

Output

Today is: ________

In above example, new Date().getDay() refers to an expression, whereas 1, 2, 3, 4, 5, and 6 refers to case values.

JavaScript switch Syntax

The syntax of switch statement in JavaScript, is:

switch(expression)
{
   case value1:
      // block of code to execute
      // if value1 matches with value of expression
      break;
   case value2:
      // block of code to execute
      // if value2 matches with value of expression
      break;
   case value3:
      // block of code to execute
      // if value3 matches with value of expression
      break;
   .
   .
   .
   case valueN:
      // block of code to execute
      // if valueN matches with value of expression
      break;
   default:
      // block of code to execute
      // if no case values matches with value of expression
      break;
}

The expression of the switch statement will be executed/evaluated once. Whatever the value comes out after evaluating the expression, is compared with the values of each case, one by one, from value1 to valueN. If a match found, then the block of code associated with that case, will be executed. And if, no match found, then the block of code, associated with default will be executed.

Note - Do not forget to use the break keyword/statement, to avoid executing/matching with other case values. It is not necessary to use the break statement for the last case, as the execution of switch ends at the end or after executing the last switch case.

Note - It is not necessary to put the default case at the end of switch statement.

Note - Sometime we need to execute same block of code for more than one switch case, or if we need to execute a block of code for multiple switch cases, then proceed in this way:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <button onclick="myf()">What Day is Today?</button>
   <p>Today is: <span id="myspan">________</span></p>
   <script>
      function myf()
      {
         let dy;
         switch(new Date().getDay())
         {
            case 1:
               dy = "Monday";
               break;
            case 2:
               dy = "Tuesday";
               break;
            case 3:
               dy = "Wednesday";
               break;
            case 4:
               dy = "Thursday";
               break;
            case 5:
               dy = "Friday";
               break;
            case 0:
            case 6:
               dy = "Weekend Day";
               break;
         }
         document.getElementById("myspan").innerHTML = dy;
      }
   </script>
   
</body>
</html>

Output

Today is: ________

See the case 0 and 6 shares the same block of code.

JavaScript Online Test

« Previous Tutorial Next Tutorial »