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!
Table of Contents
If Statements
In my journey into full stack JavaScript development, I was delighted to learn more about switc
h 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 argu
ment 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!