JavaScript switch case

The switch statement in JavaScript is used to execute some blocks of code when the "case" value matches the expression value.

JavaScript switch syntax

The syntax of the "switch" statement in JavaScript is:

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

The expression of the switch statement will be executed or evaluated once. Whatever 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 is found, then the block of code associated with that case will be executed. And if no match is found, then the block of code associated with default will be executed.

Note: Do not forget to use the break keyword or statement to avoid executing or 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 of or after executing the last switch case.

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

JavaScript switch case example

Consider the following code as an example demonstrating the "switch" case in JavaScript:

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 the above example, new Date().getDay() refers to an expression, whereas 1, 2, 3, 4, 5, and 6 refer to case values.

When the button with the text "What Day is Today?" is clicked, the function myFun() is called. The first line of the function declares a variable called d without assigning it any value. The current weekday is then evaluated using a "switch" statement. The new Date().getDay() function returns a number between 0 and 6, where 0 is Sunday and 6 is Saturday.

The switch statement assigns a string value to the d variable based on the value returned by getDay(). If the value is 1 (Monday), for example, the switch statement assigns the string "Monday" to the d variable. Finally, the innerHTML property of a span element with the ID "day" is set to the value d, updating the text "________" with the name of the current weekday.

Note: Sometime we need to execute the 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 that cases 0 and 6 share the same block of code.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!