What is Switch...case statement in JavaScript?

Javascript Web Development Front End Technology

The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.

You can use a switch statement that handles exactly this situation, and it does so more efficiently than repeated if...else if statements. In simple programming, the switch case statement is a control-flow statement that checks an expression for the different values against multiple cases.

Syntax

Following syntax will show you how you can use the switch case statements where the multiple cases to be checked for a single expression −

switch (expression){
   case firstValue:
      
      // code to be executed if the first case met the expression
      break;
   case secondValue:

      // code to be executed if the second case met the expression
      break;
   case thirdValue:

      // code to be executed if the third case met the expression
      break;
   default:

      // code to be executed if none of the cases met the expression
      break;
};

The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases.

How does the Switch statement work?

The switch case statement takes an expression inside the parenthesis and then it checks that expression for different cases and executes the particular code or the statements associated with that case. If you noticed in the above syntax, every case ended with the break keyword. The break keyword tells the interpreter that the code inside any particular case is executed and now it’s time to eliminate the switch case statement for now. The default statement will execute if none of the cases in the switch statement matches the expression.

Let us understand the practical implementation of the switch-case statement in JavaScript with the help of the code example

Algorithm

Step 1 − In the first step, we will add an input element in the HTML document to get the inputs from the users of their choice.

Step 2 − In the next step, we will add a button tag with an onclick event which will later call a function on user click to the button.

Step 3 − In the final step, we will declare a JavaScript function that contains the switch case statement to check for various cases and return different outputs on the user screen for different cases.

Example

You can try to run the following to learn how to work with a switch case statement in JavaScript −

<html>
   <body>
      <script>
         var grade = 'A';
         document.write("Entering switch block<br />");
         switch(grade) {
            case'A': document.write("Good job <br />");
            break;
            case'B': document.write("Pretty good <br />");
            break;
            case'C': document.write("Passed <br />");
            break;
            case'D': document.write("Not so good <br />");
            break;
            case'F': document.write("Failed <br />");
            break;
            default: document.write("Unknown grade<br />")
         }
         document.write("Exiting switch block");
      </script>
   </body>
</html>

Let us see one more code example where we will check whether the value entered by the user is an odd or even value using the switch case statement.

Algorithm − The algorithm of this example and the above example is almost the same you just need to do some minor addition by applying the odd/even number checking formula on the input entered by the user and the rest of the things will remain the same.

Example

The below example will explain the use of the switch case statement to find out whether the number entered by the user is odd or even −

<html>
   <body>
      <h2> Switch...case statement in JavaScript </h2>
      <p> Enter any number: </p>
      <input type = "number" id = "inp" /> <br>
      <p> Click the below button to see the results. </p>
      <button onclick = "display()"> Click to See Results </button>
      <p id = "result"> </p>
      <script>
         var result = document.getElementById("result");
         function check() {
            var inp1 = document.getElementById("inp");
            var inpVal = Number(inp1.value);
            var num = (inpVal % 2);
            switch (num) {
               case 0:
                  result.innerHTML += " The number you entered " + inpVal + " is an even number. <br> ";
                  break;
               case 1:
                  result.innerHTML += " The number you entered " + inpVal + " is an odd number. <br> ";
                  break;
               default:
                  result.innerHTML += ' You entered a wrong input. ';
                  break;
            }
         }
         function display() {
            check();
         }
      </script>
   </body>
</html>

In this example, we are grabbing the value entered by the user and then storing it in a new variable which holds the remainder of the entered value when it is divided by 2. If the remainder is 0, then the entered value will be an even number. Otherwise, the entered value will be an odd number.

In this article, we have learned about the switch case statement in JavaScript. We have discussed it in detail with the help of two different use cases of switch case statements in two different scenarios, wherein in the first one we are checking for the string inputs and in the latter one we are checking for the number inputs.