This content originally appeared on DEV Community and was authored by DEV Community
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:
- It is much easier to read and understand than an if/else statement
- It works faster. This is because, rather than check to see if each condition is satisfied sequentially like in an if/else statement, the switch statement checks all conditions simultaneously. 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.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-07T16:25:55+00:00) JS FUNDAMENTALS – If/Else vs Switch vs Ternary Operator. Retrieved from https://www.scien.cx/2022/03/07/js-fundamentals-if-else-vs-switch-vs-ternary-operator/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.