How to start and complete switch statements in JavaScript?

How to start and complete switch statements in JavaScript?


The switch statement performs a block of code depending on different cases. The switch statement is a part of JavaScript’s “Conditional” Statements that are used to perform different actions based on different conditions. Use the switch to choose one of the different blocks of code to be executed. This is the perfect solution for long, nested if and else statements.


The switch statement assesses an expression. The value of the expression is then equated with the values of each case in the structure. The related block of code is executed if there is a match. The switch statement is frequently used together with a break or a default keyword. These are both electives. The break keyword downs the switch block. This would stop the performance of more execution of code and case testing inside the block. The next code block in the switch statement is executed if the break is omitted. The default keyword requires some code to run if there is no case match. There may only be one default keyword in a switch. Though this is optional, it is suggested that we use it, as it takes care of unexpected cases.

How to start switching statements?

Think through this chain of conditional statements.

  1. if (dayOfWk === “Sat” || dayOfWk === “Sun”) {
  2. alert (“Whoopee!”);
  3. li>
  4. else if (dayOfWk === “Fri”) {
  5. alert(“TGIF!”);
  6. li>
  7. else {
  8. alert(“Shoot me now!”);
  9. li>

The “Whoopee!” alert displays if it’s a weekend day. The “TGIF” alert displays if it’s Friday. The “Shoot me now” alert displays if it’s a weekday. It works, but it’s awkward and a little ugly, particularly if we have many conditions to test. It’s time for us to learn a more elegant alternative that we can use for testing myriad conditions, the switch statement. The more conditions we need to test, the more we’ll like the switch statement. This switch statement spares the functionality of the example beyond.

  1. switch (dayOfWk) {
  2. case “Sat” :
  3. alert (“Whoopee”);
  4. break;
  5. case “Sun” :
  6. alert(“Whoopee”);
  7. break;
  8. case “Fri” :
  9. alert(“TGIF!”);
  10. break;
  11. default :
  12. alert(“Shoot me now!”);
  13. li>

I need to focus on just the first three lines of the code above for the instant. Begins with the keyword switch. Bouncing up against it is the variable that’s being tested, inside parentheses. Then there’s an opening curly bracket.

  1. The first option, that the variable dayOfWeek has the value “Sat”. Begins with the keyword case. Then the value that is being tried, “Sat”. Then space and a colon.
  2. The statement that performs if the test passes—if dayOfWeek does, in fact, have the value “Sat”. This statement is indented. Any number of statements may execute if the test passes.

How to complete the switch statements?

The first line of an if statement is trailed by a statement that performs if the condition is true. A switch statement works similarly. There’s a statement that executes if the case is true on the line below each case clause. The code that executes if the case is true is indented 2 spaces once again. It is indented by some amount due to universal Convention. The Opinions are differing on how much is best. Standardize on a 2-space indentation that is common but far from universal. Then why do all of the cases excluding the last one include a break statement? JavaScript has an untimely coincidence after a true case is found. JavaScript does not only execute the statement directly under that case. It performs all the statements for all the cases below it. So after a true cause is found and the conditional code executes, we need to jump out of the switch block by coding a break statement. If, for example, we omit the break statements in the code above, this happens:

  1. An alert displays saying “Whoopee!”
  2. A second alert displays saying “Whoopee!”
  3. A third alert displays saying “TGIF!”
  4. A fourth alert displays saying “Shoot me now.”

Now let’s look at line 11.

  1. default :
  2. alert(“Shoot me now!”);
  3. li>

The keyword default does work similarly to else in an if…else statement. The code that follows it performs if none of the conditions overhead it is met. In the example above, if dayOfWk isn’t “Sat” or “Sun” or “Fri”—if it’s anything other than those three values—an alert displays saying “Shoot me now.” Note that default is trailed by a space and a colon, just like the case clauses above it. Also, note that there’s no break statement. That’s as default always comes last which means there are no statements beneath it to execute unsuitably. Default code is optional, just as else code is optional after an if statement in a switch statement. Deprived of the default code, if none of the cases test true, nothing happens. The cautious coders include a break statement after the last condition anyway as insurance, even though it may be superfluous when there is no default code. We won’t have to recall adding a break to the block above it in order to avoid a disastrous cascade of statements if we decide to add a new condition to the end later.

Mansoor Ahmed is Chemical Engineer, web developer, a writer currently living in Pakistan. My interests range from technology to web development. I am also interested in programming, writing, and reading.
Posts created 422

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top