if-if or else-if

I often get confused about using multiple if or a chain of if-else if. I finally figured it out.

How to compare

Case 1: Use multiple if statements when you have different things to compare
Case 2: Use the if, else-if chain when you have the same thing to compare.

A different way

For case 2, you can substitute the if, else-if chain with a switch-case block. Replacing depends on what you are checking.

For simple mono conditional comparison, it's best to stick with switch case blocks. Here's an example

const getJobDescription = (jobName) => {
  switch(jobName){
    case "painter":
      return "Paints on canvas for art lovers"
    case "developer":
      return "Writes code which runs on machines"
    default:
      return "I'm not sure, I'd google it"
  }
}

For checks with multiple conditions, if-else blocks can do the trick.

const devTitle = (yearsOfWorking, salaryEarned) => {
  if (yearsOfWorking > 5 && salaryEarned > 10000) {
    return "Senior developer"
  } else if (yearsOfWorking > 3 && salaryEarned > 5000){
    return "Intermediate developer"
  } else if (yearsOfWorking < 3 && salaryEarned < 5000){
    return "Junior developer"
  }
  return "Untitled developer"
}

What about nested if statements

When you have 2 levels of nesting, you may not face any issue. But when the nesting gets three levels deep, you may have taken a bad architecture or used an inefficient logic. Let's see an example

const theFactorText = (number) => {
  if (number % 2 !== 0){
    if (number % 5 === 0){
      return "That's the factor"
    } else {
      if (number < 10) {
        return "Not the factor"
      } else {
        throw new Error(
          "Number doesn't fall under any category. Input another"
        )
      }
    }
  }
  return "Not the factor"
}

The code block above shows a function that returns some text based on the number passed in. The if statements are nested and form a messy block. A refactor of the block above would be this

getTheFactor = (number) => {
  if (number % 2 !== 0){
    return number % 5 === 0?
      "That's the factor":
      return number < 10?
        "Not the factor":
        throw new Error("Number doesn't fall under any category. Input another")
  }
  return "Not the factor"
}

The issue with the code above is its readability. A more sensible approach would be to separate the units of functionality into functions like this

const throwErrorIfWrong = (number) => {
  return number < 10?
    "Not the factor":
    throw new Error("Number doesn't fall under any category. Input another")
}
const returnTrueIfMultipleOf5 = (number, cb) => {
  return number % 5 === 0?
    "That's the factor":
    cb()      
}
getTheFactor = (number) => {
  if (number % 2 !== 0) {
    returnTrueIfMultipleOf5(number, throwErrorIfWrong(number))
  }
  return "Not the factor"
}

The code block above shows a more readable function. Just have it mind that you can always break functionality into multiple functions for better readability and testing.

Wrap up

This article that goes deeper into the use of conditionals. I recommend you check it out.
Share this article if you found it useful. Thanks for reading ✌🏽🧡