How to write if-else statement in JavaScript

Other than switch-statement, if-else statement is also a conditional statement that is very frequently use for comparing expressions.

If-else statement

There are always time where we need to perform operations only when certain condition occurs. If-else statement structure provides a simple structure fo you to add this logic to your code without much complexity.

Let’s take an example of a car driving from one square to the other. For it move to the next step, the car need to look at the traffic light to decide it can start engine, slow down or to stop the engine.

Let’s say 1 is referring to green light, 0 referring to yellow light and -1 referring red light. When “getEngineStatus” method is called, the code will go though the condition statement in the order of top down to determine which code block is to be executed.

function getEngineStatus(trafficLight) {
  // Let's say 1 is green light, 0 is yellow light and -1 is red light
  if(trafficLight == 1) {
    console.log('you can continue move');
  }
  else if(trafficLight == 0) {
    console.log('you need to slow down');
  } 
  else {
    console.log('you need to stop the engine');
  }
}

What you need to be careful is that once a condition match and the code block is executed, there is no way the other code blocks can be executed even if it also meet with the condition.

In the example below, the value 100 is bigger than both 10 and 50. But the second code block never be executed as long as the number is 11 and above since the first condition is matched.

const someNumber = 100;  

if(someNumber > 10 ) {
  console.log('More than 10.');
}
else if(someNumber > 50) {
  console.log('More than 50.');
} 
else {
  console.log('Less than or equal to 10.');
}

// Output: More than 10.

Logical operators

What happens if there is a need to detect a range of numbers for a code block to be executed? We can choose to write nested if-else but it will make the code very complicated. An easier method will be to use logical operator

• && : AND operator where 2 conditions need to satisfy in order to return true
• || : OR operator where just one of the 2 condition need satisfy in order to return true

const someNumber = 100;  

if(someNumber >= 10 && someNumber <= 100) {
  console.log('Between 10 to 100.');
}
// Output: Between 10 to 100.
// Satisfy both condition since 100 if above 10 and also below or equal to 100


if(someNumber > 50 || someNumber < 10) {
  console.log('Below 10 or above 50.');
}
// Output: Below 10 or above 50.
// Satisfy only the first part of the condition but since it is an OR operator, it will not check the second part of the expression and immediate return true


if(someNumber >= 10 && someNumber <= 90) {
  console.log('Between 10 to 90.');
}
// Output: 
// Since it does not satisfy the second part of the expression, it will return false and the code block will not be executed.

Conclusion

If-else statement is an easy to use structure to test if an expression match in a step by step manner. But it is also important to note on the range of values does not intersect between the code blocks for even execution.