If-else statements are a way to check for a particular conditions or values before executing a piece of code, function or reassigning a particular variable. However, nested "if-else statements" can easily become very difficult to read and painful to check more conditions. e.g

if (alive) {
  if (healthy) {
    if (bouyant) {
      if (restaurantOpen) {
        console.log("Very well. Time to grab a plate of rice");
      } else {
        console.log("Restaurant closed. I can't eat even though I have money");
      }
    } else {
      console.log("I am broke");
    }
  } else {
    console.log("I am not healthy");
  }
} else {
  console.log("I am not alive");
}

Issues with nesting "if-else statements"

As you can see above, there are problems already present in our code. The problems present above includes the following:

1. Ugly code base: Our code becomes very difficult to read. It means that to read and understand each "if-else statement" we have to employ the use of external libraries that colors each curly braces differently.

2. Terrible developer experience: There is a high level of indentation. This however means that we suffer the consequences of multiple jumps in our code which translates to a bad developer experience.

3. Difficulty adding more conditions: Multiple "if-else statements" makes adding more checks a herculean task. It becomes difficult since it requires going into the deepest "if-else statement" to attach more.

Remedies to nesting "if-else statements"

The solutions to this problem are the use of "Switch statements" and the use of "Guard Clause". However, I prefer the later as it looks better and cleaner.

According to Wikipedia: " A guard clause, guard code, or guard statement, is a check of integrity preconditions used to avoid errors during execution. It is a boolean expression that must evaluate to true if the program execution is to continue in the branch in question."

We can refactor and make our code look cleaner, more robust and easy to add other checks by using the "Guard clause". This can be achieved by checking the falsity of each value and return a null or undefined value. Then finally executing the code. e.g

if(!alive){
  console.log("I am not alive");
  return null;
}
if(!healthy){
  console.log("I am not healthy")
  return null;
}

if(!bouyant){
  console.log("I am broke")
  return null;
}

if(!restaurantOpen){
  console.log("Restaurant closed. I can't eat even though I have money");
  return null;
}

console.log("Very well. Time to grab a plate of rice");

Conclusion

The use of the guard clause has improved the readability of our code and has now made it easier for us to add more conditions in the future without having to jump multiple times between "if-else statements".

#THW Web Apps