Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

A switch statement is very similar to an if statement. If statements provide the possibility of attaching else ifs and an else, which helps JavaScript handle multiple conditionals. However, an if statement with many extra conditionals seems a bit excessive and is difficult to read. Typically, a programmer, like yourself, would want to break the if statement down into more readable pieces. The switch statement excels at code readability. The example below will introduce us into the syntax and structure of a standard switch statement.

Example <script type="text/javascript">
var x = 3;
switch(x)
{
case 1: // This case condition is the same as the if conditional of if(x == 1)
document.write('Case 1.');
break; case 2: // This case condition is the same as the if conditional of if(x == 2)
document.write('Case 2.');
break; case 3: // This case condition is the same as the if conditional of if(x == 3)
document.write('Case 3.');
break; case 4: // This case condition is the same as the if conditional of if(x == 4)
document.write('Case 4.');
break; default: // This case condition is similar to the else statement
document.write('Default.');
break;
}
</script>
Result Case 3.

To define a switch statement, you begin with the keyword switch and place the value in parentheses. Generally, this value will be a variable, but you can also place numbers or strings in the parentheses as well. Once inside the switch statement, new keywords like case, break, and default appear. The keyword case is followed by some value. However, the value following the case is usually a static value like an integer or a string rather than a variable, but that does not mean you couldn't use a variable instead. In an if statement, we have a condition, and whenever that condition is met, we execute the statement inside of it. The case condition is more like an if statement that has an equal to (==) conditional. Following the colon, we can provide statements that we want to be executed whenever the condition is true. Statements can be provided inside the case until a break is defined and executed. The keyword break states that the condition is over and to exit out of the switch statement (break is also used in JavaScript loops). Finally, the last important term in the example is default. Other than the syntactic difference, default performs the exact same task as an else statement does. If none of the cases are true, the default case will be executed.

The logic in the example is simple. First, our variable x equals the integer 3. We proceed through the switch statement until we find a case that is equal to 3. Once that condition has been met, we execute the document.write('Case 4.'); found inside the appropriate case. Ultimately, switch statements are not used very often in contrast to the if statement. But, the switch statement provides order and simplicity when you are modifying the code or adding extra conditionals.

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments

No comments yet... Be the first!



Advertisement