Use of Switch Statement in Javascript

In my previous article or tutorial i have explained all about nested If Else If statements. Switch Case statement almost similar to that. But the basic difference between If Else If and Switch Case is about usability, readability and maintainability. Writing If Else If statement upto 10 to 20 level is OK. But if you think you need to do that for 50 or more times then managing the If Else If will be a hactic job. In this situation Switch Case statement is easier than If Else If statements.

Overview of Switch Case Statement:
At first we need to define an expression to evaluate. Based on this expression value we will execute statements. Instead of If Else If here we use Case. We can use single Case or multiple Case statements like as nested If Else If statements. Each Case associated with a value. If the Case value matched with the Switch expression value then the corresponding Case statement will be executed. Otherwise Default condition statement will be executed. But keep in mind that writing the Default condition is optional.So if any Switch expression value does not match with any Case value and you did not define the Default statement than the output will be blank. Another most important thing is, never forget to use the break statement after each Case. Otherwise all next consecutive Case statements will be executed. This is also an another important difference with If Else If statement. I will show you later.

Swtich Case Basic Syntax:

switch(expression) {
    case n:
        .....
        Code Statement // No need to wrap by curly braces
        .....
        break;
    case n:
        .....
        Code Statement
        .....
        break;
    default:
        default code statements
}

Switch Case code Example:

<script type="text/javascript">
    var nMonthNo = 7;
    var sMonthName="";
    switch (nMonthNo) {
        case 1:  sMonthName = "January";
                 break;
        case 2:  sMonthName = "February";
                 break;
        case 3:  sMonthName = "March";
                 break;
        case 4:  sMonthName = "April";
                 break;
        case 5:  sMonthName = "May";
                 break;
        case 6:  sMonthName = "June";
                 break;
        case 7:  sMonthName = "July";
                 break;
        case 8:  sMonthName = "August";
                 break;
        case 9:  sMonthName = "September";
                 break;
        case 10: sMonthName = "October";
                 break;
        case 11: sMonthName = "November";
                 break;
        case 12: sMonthName = "December";
                 break;
        default: sMonthName = "Not Defined";
                 break;
    }
    alert(sMonthName);
</script>

Output:
javascript_Switch

Switch Case code Example without break:

<script type="text/javascript">
    var nMonthNo = 7;
    var sMonthName="";
    switch (nMonthNo) {
        case 1:  sMonthName += "January";

        case 2:  sMonthName += "February";
                
        case 3:  sMonthName += "March";
                 
        case 4:  sMonthName += "April";
                 
        case 5:  sMonthName += "May";
                
        case 6:  sMonthName += "June";
                 
        case 7:  sMonthName += "July";
                 
        case 8:  sMonthName += " August";
                 
        case 9:  sMonthName += " September";
                 
        case 10: sMonthName += " October";
                 
        case 11: sMonthName += " November";
                 
        case 12: sMonthName += " December";
                 
        default: sMonthName += " Not Defined";
                     
        }
    alert(sMonthName);
</script>

Output

Note: If none of the case statement is true, then the default statement, if any, will be executed. It is optional. And if break is not used than next all consecutive case statements will be executed.

Hope now you understand the use of Switch Case statement instead of If Else If as well as the necessity of break statement.

Download Code Example

Posted in Client, Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*