Articles → JavaScript → Switch Statement In Javascript

Switch Statement In Javascript

In this article, we will discuss about switch statement in JavaScript.

Purpose

The switch statement is also used for conditional execution of code like the if-else statement.

Syntax

switch (n) {
    case 1:
        //execute code block 1
        break;
    case 2:
        //execute code block 2
        break;……….
        default:
            //  execute code block 3
}

The switch statement starts with the switch keyword followed by a required parameter (n). This parameter can be an expression or a variable.

If the parameter is an expression then the result of the expression will be matched with the value following the case keyword. If the parameter is a variable then the value of the variable is matched with the value following the case keyword.

If there is a match then the code contained in the case will execute. If no value is matched then the code contained in the default will execute.

The break keyword causes the switch block to exit immediately and the code after the switch block executes.

If-Else Vs Switch

Switch is more logical in syntax as compared to if-else
Switch is quicker in execution

Example

In this example, I will check the weekday of today’s date and based on the weekday write the respective weekday name on the webpage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Switch demo page</title>
   </head>
   <body>
      <div id="dateDiv" style="background-color: Green; color: White;">
      </div>
      <script language="javascript" type="text/javascript">
         var dateDiv = document.getElementById("dateDiv");
         //  Write the logic for date
         var d = new Date();
         switch (d.getDay()) {
             case 0:
                 dateDiv.innerHTML = "Sunday";
                 break;
             case 1:
                 dateDiv.innerHTML = "Monday";
                 break;
             case 2:
                 dateDiv.innerHTML = "Tuesday";
                 break;
             case 3:
                 dateDiv.innerHTML = "Wednesday";
                 break;
             case 4:
                 dateDiv.innerHTML = "Thursday";
                 break;
             case 5:
                 dateDiv.innerHTML = "Friday";
                 break;
             case 6:
                 dateDiv.innerHTML = "Saturday";
                 break;
         }        
      </script>
   </body>
</html>

Try It

Posted By -	Karan Gupta

Posted On -	Thursday, November 3, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**