Computers are very powerful, but currently still quite dumb - unless we make them smart.

Everyday they are able to do jobs faster and faster.

That's cool, but sadly for them to be able to do the jobs in the first place, we must provide ***all*** of the information necessary to get the job done, otherwise they get confused and things break. Guess not that smart just yet.

Either way here's the important part - since in many ways we still are a bit smarter, we can take care of them by letting them know what they should do if something they can't find something they need to get a job done.

Just like you would to another person you can tel a computer "Hey if data is missing do this instead, else keep doing what you are. So with a simple if/else check we can ensure that a computer doesn't run itself into a wall, if he runs out of road.

These `if` checks are known as Guard Clauses.

## How to use Guard Clauses in JavaScript?

Here's an example. Let's say we'd like to calculate a total due after we apply a discount on the price of a pistachio-caramel ice cream.

```javascript
const iceCreamPrice = 8; const discount = 4;
const calculateTotal = () => iceCreamPrice - discount;

console.log(calculateTotal());
/* Will log */
4
```

If our discount, for example, is not defined, we will get a broken result (in this case `NaN` - Not a Number value)

```javascript
const iceCreamPrice = 8; const undefinedDiscount = undefined;
const calculateTotal = () => iceCreamPrice - undefinedDiscount;

console.log(calculateTotal())
/* Will log */
NaN
```

Since applying the `undefined` discount will leave us with a broken value, anything that would require a number in the following steps would not be possible. For example, calculating the total amount we have to pay - and that is even though the other price will be a valid number), like so:

```javascript
const brokenIceCreamPrice = NaN; const toppingPrice = 4;

const calculateTotal = toppingPrice + brokenIceCreamPrice;

console.log(calculateTotal());
/* will log NaN */
NaN
```

This will break the functionality and lead to errors.

To prevent the app from breaking in situations where value is broken, we use a Guard Clause.

With the Guard Clause, we will simply check if the discount is present (we could also check if it is a number, but for the sake of simplicity we will skip that step) and if so, apply the discount.

Because we only have one more item, we will simply return the price of the ice cream if there's no discount.

```javascript
const iceCreamPrice = 8; const discount = undefined;
const calculateTotal = () => !discount ? iceCreamPrice : iceCreamPrice - discount;

console.log(calculateTotal());
/* Will log */
8
```

In the above example, we used ternary operator `condition ? result : fallback` (read this article for more on ternary operators).

Because we added the Guard Clause, which in this case was the first part of the ternary operator we now have a valid total even though our discount is `undefined`.

An expanded (not ternary operator) version of the Guard Clause would like this:

```javascript
const iceCreamPrice = 8;
const discount = undefined;

const calculateTotal = () => {
/* The Guard Clause */
if (!discount) return iceCreamPrice;

return iceCreamPrice - discount
};

console.log(calculateTotal());
/* Will log */
8
```

## Why are Guard Clauses better than regular if/else blocks?

The above snippet written with a regular `if/else` block to do the same checks would like like this:

```javascript
const iceCreamPrice = 8; const discount = undefined;

const calculateTotal = () => {

/* Regular if/else check */
if (!discount) {
    return iceCreamPrice;
  } else {
    return iceCreamPrice - discount
  }
};

console.log(calculateTotal());
/* Will log */
8
```

Because we only have one simple check (whether the discount is present), it doesn't get a loooot worse, but, it does add a couple of extra lines for the same logic. Additionally, it makes it less readable. So if you have multiple checks that you need to do you will quickly find yourself in nested `if/else` checks which will make you want to go do your dishes instead of doing programming.

## Summary

With a Guard Clause, you can terminate your function early if some of the required conditions are not met or if required data is missing. This makes your app more performant, consumes fewer resources, and avoids potential errors.

And th-th-th-that's all folks.

Questions, comments, better examples? Leave them in the comments below or tweet @ijsto or @scottagirs 🙌

Guard Clauses are very important not only to eliminate errors, but also to improve DX and code readability.

What is a Guard Clause?

Comments