Articles → JavaScript → Switch Statement In Javascript

Switch Statement In Javascript

In this tutorial I will discuss about switch statement in JavaScript. Like if-else this statement is also used for conditional execution of code.

Prerequisite

Before you read this article you should have

hands on experience in creating simple web pages in HTML.
hands on experience in creating basic JavaScript application.

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 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

An obvious question that comes to your mind is – we have if-else then why do we need to remember another concept. The reason is

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

Sample

In this sample I will check the weekday of today’s date and on the basis of 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>

Demo

Posted By -	Karan Gupta

Posted On -	Thursday, November 3, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**