Unraveling the JavaScript Switch Statement

Written by: Carmelo Carbonara • Edited by: Linda Richter
Updated Oct 12, 2008

The JavaScript switch statement can be a little confusing but it is a powerful alternative to several lines of if .. then ..else and goes one step further than the vbScript Select Case statement.

Background

The JavaScript switch statement is similar to the vbscript Select Case statement; "Select Case" executes the instructions on the first match and exits the loop, while the switch function will start executing on the first match and continue executing through the rest of the matches unless there is a break or return statement.

For example:

The browser ouput of the script below is going to be:

John

var x="John"

switch (x)

{

case "Alex" :

document.writeln(x +"<br />")

case "Mary" :

document.writeln(x +"<br />")

case "John" :

document.writeln(x +"<br />")

}

</script>

The browser ouput of the script that follows is going to be

John

var x="John"

switch (x)

{

case "John" :

document.writeln(x +"<br />")

case "Alex" :

document.writeln(x +"<br />")

case "Mary" :

document.writeln(x +"<br />")

}

</script>

If there was a break or return statement under the statements for each case, the function would have been exited immediately and processing stopped. In the examples above, this only works for the first sample since the first match was found at the end of the switch statement block.

Using the Switch Statement in Bulk Formatting Elements

Below we have a bulk of span elements and we'd like to set the text colors without having to type in the id or CSS attributes. We would use the Document Object Model (DOM) object and collection method to access each element and set the style attributes for each element. The script below assigns an id, color and border attribute to each span element that's inside the blockquote element. The color attribute depends on the id of each span element.

The sample code below gives the XHTML and JavaScript code to handle this; the for loop sets the display, padding and border for rendering clarity but isn't necessary. There are 2 functions; doThis()¹ and doThis2()².

¹Function doThis() has a match in the first position of the switch statement. This is to illustrate that execution begins here and continues through the remaining case matches; since there are no break or return statements.

²Function doThis2() has a match in the last position of the switch statement; showing that it is the only case match and so the only formatting that is applied.

Paste the code in your editor to see ...

HTML Code

</blockquote>

JavaScript Code

function domElement(objID) {return document.getElementById(objID) ;} ;

function domCollection(domObj,tagName) {return domObj.getElementsByTagName(tagName)} ;

spans=domCollection(domElement("sampleBlock"),"span") ;

/* this for loop just simplifies rendering */

for (i=0 ; i < spans.length ; i++)

{

spans[i].id="span"+i;

spans[i].style.border="solid 1px lightgrey";

spans[i].style.padding="2px";

};

doThis=function()

{

switch (spans[0].id)

{

case "span0" :

domElement("span0").style.color="red" ;

case "span2" :

domElement("span2").style.color="cyan" ;

case "span3" :

domElement("span3").style.color="yellow" ;

case "span4" :

domElement("span4").style.color="blue" ;

}

doThis2=function ()

{

switch (spans[0].id)

{

case "span2" :

domElement("span2").style.color="cyan" ;

case "span3" :

domElement("span3").style.color="yellow" ;

case "span4" :

domElement("span4").style.color="blue" ;

case "span0" :

domElement("span0").style.color="red" ;

}

/* the function calls below are commented out; uncomment them one at a time to see how this example works */

//doThis() ;

//doThis2() ;

</script>

Finally

The examples above did not show any break or return statements in order to illustrate how the switch statement works. If we wanted to to break out of the switch loop, we would add a break or return statement as the last line of: statements, function calls or methods under each case's set of statements.

Here's a snippet:

case "span0" :

....some statement ;

....another statement ;

break ;