Going back to basics: Conditionals
Tags: javascript, programming
Published: 2020-03-12 12:43:21

If you're reading this, there's a good chance you learned how to use conditionals years ago.

_If not, throw Error("learn conditionals")_

Given how early on we learn about them, it's easy to overlook the impact of conditional management and how conditions can spiral out of control.

Below are a few real world examples of code I've seen in the wild and some tips on how to avoid these traps!


## Avoiding reassignment

Starting off with the basics, if you're able to assign a value at declaration time, you have one less moving part in your code.

Here's a basic example where reassignment is used.

```js
let x;

if (y > 5) {
  x = "large"
} else {
  x = "small"
}
```

In the following example, we remove the need for reassignment by using a ternary.

```js
const x = (y > 5) ? "large" : "small";
```

If your language doesn't support ternaries, or you have more than two conditions to consider, you can opt for isolating your conditional logic into a function.

```js
const x = getSize(y)
```

> Note: A good exception to this rule is when iterating through collections

## Flattening conditionals

Another tip is to keep your conditions flat - even if this means reusing a value inside of your conditional check.

This trims down the number of conditions you need to work with.

Here's an example of nested conditionals.


```js
if (x) {
  if (x > 5) {
    return "large"; 
  } else {
    return "small";
  }
} else {
  return "unknown";
}
```

And here is an identical function body but with flattened conditionals.

```js
if (x && x > 5) {
  return "large"
}

if (x && x < 5) {
  return "small"; 
}

if (!x) {
  return "unknown"
}
```

This example segues us nicely onto this next tip...

## Handling undesirable states early on

Anyone who has used JavaScript callbacks likely recognises this pattern

```js
doSomething((err, data) => {
  if (err) {
    return handleError(err)
  }

  handleData(data);
})
```

By handling undesirable states early on with a _conditional guard_, we add a layer of safety to all successive code and remove the need to re-check.

We can apply this pattern to our flattening conditionals example

```js
if (!x) {
  return "unknown"
}

if (x > 5) {
  return "large";
}

return "small"; 
```

Remember, **the logic for this is identical to the earlier nested conditional example**. Which do you think is easier to read?

## Conclusion

These few tips are a solid guideline for how to break out your code and can have a substantial impact on reducing the number of _moving parts_ and _interleaving conditions_.

When writing code with lots of conditional logic, remember to ask yourself

 - What are the different resulting states/actions that can occur
 - What conditions are required to meet these states
 - How can I implement them in a way that is _mutually exclusive_

**TL;DR:** Keep things static, return often, and take a moment to think about your logic.

---


Hopefully, you found this interesting! If you have any thoughts or comments, feel free to drop them below or hit me up on twitter - @andyrichardsonn

_Disclaimer: All opinions expressed in this article are my own._