Short Circuit Conditionals in JavaScript

#javascript #tutorial #tips

What are Short Circuit Conditionals?

Short circuit conditionals are a condensed way of writing simple if statements. They take advantage of the way JavaScript evaluates logical operations, such as and.

Let's say you're writing a script that fetches some data and you want to log if there's an error. You may write something like;

const data = getData();
if (data.error) {
    console.log('There was an error.');
}

This works just fine, but there's another way to do it. We can take advantage of the way JavaScript evaluates conditionals and condense the if statement above to a single line;

(data.error) && console.log('There was an error.');

Doesn't that look nicer? Let's take a look at why this works.

Logical And

Firstly, we need to understand how the logical and works. Represented by && in JavaScript, it returns true if, and only if, both the inputs are true. For example, if we have two variables a and b, then the truth table for these values will look like this;

a	b	a && b
true	true	true
true	false	false
false	true	false
false	false	false

How it Works in JavaScript

Logical operators in JavaScript evaluate from left to right, meaning that given the expression from the last example, a && b, a will be evaluated before b. JavaScript also uses short-circuit evaluation, which means that if a turns out to be false, then your program will realise that the entire expression cannot be true, so it will return false and never evaluate b. Whereas, if a is true, it will still need to evaluate b to see if the whole expression is true or false. This is something we can take advantage of when writing simple if statements.

Let's go back to our first example, where we only want to log the result of a function if there's an error, and break this down to see how it works. Here's the short-circuit version again;

data.error && console.log('There was an error');

Remember that the expression will be evaluated from left to right, so data.error is the first thing that gets looked at. Here, there are two possible branches.

There is no error
In this case, data.error will be false and it will short-circuit. This results in the console.log() never getting run.
There is an error
Now data.error is true, and the whole expression can still be either true or false. The right-hand side of the expression now needs to be evaluated to find the overall result, meaning that console.log() now gets run.

It's important to note that console.log() returns undefined so the example expression will eventually result in undefined. But in cases like this, where we're using it as a conditional, we're not concerned about the actual result - only if the right-hand side of the expression is run.

As mentioned by Ben Calder in his comment, this can be considered an anti-pattern when used outside of assignment. One reason for this is that it reduces the readability of your code. There's a good explanation of this in this article.

Closing Notes

Thanks for reading! This is my first post, and hopefully you learned something new. If you did, leave a reaction and feel free to follow me on Twitter.