Switch Statements

The conditional if, else, and else if statements are some of the most powerful and often used statements in programming. As a teenager playing around with Visual Basic, these statements were the building blocks into my understanding of programming logic. So to help me cement this in my brain, I’m writing a blog post about it to document my journey!

If Statements

In my journey into full stack JavaScript development, I was delighted to learn more about switch statements. Like if statements, switch statements are conditional statements that check if an argument is true. When if statements are combined with else if statements, each else if condition allows a function to be performed based on each condition. Appending an else statement at the end makes the last function a default condition, meaning if all other conditions fail, then the default condition would be met and that last function would run.

Example:

if (condition1 is true) {
     runThisFunction1();
} else if (condition2 is true) {
     runThisFunction2();
} else if (condition3 is true) {
     runThisFunction3();
} else {
     runThisDefaultFunction();
}

If you want to run a function whether any of the conditions are met, then you’ll want to use an OR operator to separate each condition, represented by pipes ||. Using pipes in an if statement means that if any of the conditions test true (or are met), then a function will run. This can be helpful when wanting to group conditions, such as in the following:

if (condition1 true || condition2 true  || condition3 true) {
     runThisFunction1;
} else {
     runThisFunction2;
}

Switch Statements

This now brings us to switch statements. Switch statements can be used in place of else if conditional statements to test if a condition is true, and if so, then a function can be run under each condition.

The switch statement relies on an argument or expression to test, and then uses a case clause to determine whether an argument tests true, and if so, what function or action to take. When using switch statements, it is important to add a break statement to each case clause to stop the switch statement from moving on to the next case. If a break statement is not used, it will run the next case clause whether the condition tests true or not, until it reaches the end, or until runs into another case clause with a break statement.

let argument = favoriteAvatarSeason;

switch (argument) {
     case ‘book1’: 
          alert(‘I almost agree!’);
          break;
     case ‘book2’:
          alert(‘hmm, maybe…’);
          break;
     case ‘book3’:
          alert(‘Yes, wholeheartedly agree!’);
          break;
     default:
          alert(‘What do you got against Aang???’);
}

In the case above, the default clause does not need a break statement, because it only runs if none of the other cases test true,

What if you can’t decide between Book 1 and Book 3, and you refuse to compromise? Switch statements have you covered!

let argument = favoriteAvatarSeason;

switch (argument) {
     case ‘book1’: 
     case ‘book3’:
          alert(‘Yes, wholeheartedly agree!’);
          break;
     case ‘book2’:
          alert(‘hmm, maybe…’);
          break;
     default:
          alert(‘What do you got against Aang???’);
}

In the switch statement above, the line alert(‘Yes, wholeheartedly agree!’); will run if either case ’book1’ or case ’book2’ conditions are met.

Else If vs Switch Statements

Although both else if and switch statements can both get the job done, I think the takeaway here is knowing when to use one or the other. If you have numerous conditions, such as 5 or more, then it might make more sense to use switch statements, as it would be easier to read, especially if grouping conditions together. Are there any situations in JavaScript where an else if statement or switch statement can perform a function or test that the other can not? Let me know your thoughts!