Javascript Switch Statement Quirks

Javascript: Things you should know

Note: This is part II of a "Javascript: Things you should know" series. I assume readers have an understanding of the core language. I try to cover quirks that are important, often lead to logic errors but don’t throw an error, and aren’t covered in most books or tutorials. The previous entry was Browser Detection versus Object Detection.


JavaScript switch statement:

There are three things you may or may not know about the switch statement:

  1. there is no datatype conversion ,
  2. once there is a match, all expressions will be executed until the next break or return statement is executed, and
  3. you can include multiple cases for a single block of code.

Data Type is important. JavaScript is NOT loosely typed when it comes to case comparisons

Javascipt is generally a loosely typed language. In other words, there is no need for data type declarations, you can easily change the data type, and you can compare values of different types. Normally in JavaScript data type does not matter. In regular if statement comparisons data type doesn’t matter unless you are using strict comparisons that specifically check for data type:

y = 5;
x = '5';
if(x == y){
  alert("they're the same"); // this alert will show
} 

if(x ===y){
alert("Data types match?"); //This will not show: different types
}

The exception is case values in the switch statement. For the case to be a match, the data types must match. Think for it as switch statements including === (strict equal) instead of == (equal) for case comparisons.

y = 5;
switch(y){
  case '5':
  alert("hi"); // this alert will not show since the data types don't match
}

In the above case, there is no match as 5 and ‘5’ are not the same datatype.

Break or Return statements are necessary

Although not required, if you omit the return or break statement in your case code block, once there is a match, all statements will be executed until the end of the switch statement or until the next break or return statement is encountered, whichever is first.

<script type="text/javascript">
//<![CDATA[
y = 5;
switch(y){
  case 5:
    alert("this matches");
  case 4:
    alert("this does not match, but will be displayed");
    break;
  case 3:
    alert("not shown due to break");
}
//]]>
</script>

In the above switch statement, there is a match in the first case, so the alert is correctly displayed. The script continues executing statements until it encounters the end of the switch statement, a break or a return, whichever comes first. Since there is no break, the second alert is erroneously displayed.

Multiple cases for a single block of code

<script type="text/javascript">
//<![CDATA[
y = 5;
switch(y){
  case 5:
  case 4:
  case 3:
    alert("this matches");
    break;
}
//]]>
</script>

If we extend what we just learned above — that once there is a match, every statement is executed until a break or return if found — then it makes sense that the alert in the above switch statement will be executed if any of the cases match.

This entry was posted in JavaScript, Web Development. Bookmark the permalink.

2 Responses to Javascript Switch Statement Quirks

  1. jasonw22 says:

    Here’s a useful page for Javascript type conversion methods that might come in handy if switch’s === behavior trips you up: http://www.jibbering.com/faq/faq_notes/type_convert.html

  2. Pingback: JavaScript的陷阱 « Koubei UED

Leave a Reply

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