if-if or else-if
Tags: functional, 100daysofcode, architecture
Published: 2020-07-11 06:54:46

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

```js
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.
```js
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

```js
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
```js
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
```js
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](https://sublimedev.hashnode.dev/dump-the-if-else-use-these-short-hand-techniques-instead-ck9hjps6907nccxs1vxxou6i1) 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 ✌🏽🧡