JS FUNDAMENTALS - If/Else vs Switch vs Ternary Operator

Oftentimes when programming, we are presented with situations where we have to write code that produces a certain output(value/result) based on what the input is and any conditions surrounding it. In Javascript, there are three(3) ways to handle such situations. You can use either an if/else statement, the switch statement or the ternary operator.

These 3 all work quite similarly but have their specific use cases and we are going to dive into them right away.

If/Else Statement

The if/else statement has two primary parts:

• The if(true) block which states what should be returned if the given condition is met.
• The else(false) block which states what should be returned if the condition in the if block isn't met.

This is true for a problem with only one condition as shown below.
if(condition){
code to be executed if true
} else{
code to be executed if false
}

One may ask, what happens if there's more than one condition? Well, that's where the else if block comes in. The else-if block is used when the problem has more than one condition as shown below. Think of it as basically as second or third if block based on how many conditions there are.
if(condition1){
code to be executed if condition1 is met
} else if(condition2){
code to be executed if condition1 is not met but condition2 is met
} else{
code to be executed if neither conditions is met
}

So you can basically use the if/else statement for a problem with any number of conditions by simply having multiple else-ifs. But you can imagine how repetitive and confusing that would be if the problem had say a 100 conditions. That's literally a bug waiting to happen. A way around this is to use the Switch statement.

The Switch Statement

The switch statement is often the preferred method to use when we have to test for more than 5 conditions. This is because:

1. It is much easier to read and understand than an if/else statement
2. It works faster. This is because during compilation, the compiler creates a jump table for the switch. This results in the switch executing only the correct case rather than going through all possible conditions like an if/else would. This is what a switch statement looks like


switch (variable){
case (value1):
(code to be executed)
break;
case (value2):
(code to be executed)
break;
case (value3):
(code to be executed)
break;
case (value4):
(code to be executed)
break;
default:
(code to be executed)
}

The switch statement compares the given variable to each value by strict equality and decides which code to run. If none of the given values match the variable, the code under default is run.
It is worth noting that since the switch statement only checks for equality, it is not suitable for evaluating boolean expressions.

The Ternary Operator

The ternary operator is basically an if/else statement written in one line. It take three arguments.

• First is the condition
• Second is the code to be executed if the condition is true
• Third is the code to be executed if the condition is false This is what it looks like:

condition ? (code run if true) : (code run if false)

Since the ternary operator is an expression and not a statement like an if/else, its output is always a value. We can as a result store the value of the operation in a variable and pass it on to another piece of code. This not possible with an if/else statement or a switch statement.

Conclusion

• Use if/else if the operation involves not more than 5 conditions.
• Use the switch statement if the operation involves more than 5 conditions.
• Use the ternary operator when you want to make a quick decision and set the result to a variable.