DEV Community

loading...

Short Circuit Conditionals in JavaScript

witaylor profile image Will Taylor ・3 min read

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.

  1. 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.

  2. 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.

Discussion (4)

Collapse
jwhenry3 profile image
Justin Henry

The only thing I would think is worth mentioning is that comparisons have quirks with javascript.

An empty string, zero, null, undefined will all ring false.

Readability is more important to me than short lines, however if done properly, you can achieve both goals.

Collapse
blindfish3 profile image
Ben Calder

Worth mentioning that using this pattern outside of an assignment is considered an anti-pattern (by some at least).

Collapse
witaylor profile image
Will Taylor Author

Good point - updated the post

Collapse
damxipo profile image
Damian Cipolat

Nice! recently I have writted an article telling about some js techniques and short circuit to avoid use if.

Forem Open with the Forem app