Home » Tutorials » JavaScript » Switch Statement

Switch Statement

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.



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Switch Statement". After Hours Programming. Accessed on September 20, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/switch-statement-js/.

  • Stewart, Suzy. "Switch Statement". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/switch-statement-js/. Accessed 20 September, 2024.

  • Stewart, Suzy. Switch Statement. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/switch-statement-js/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.