Dani Schuhman

Posted on

# JavaScript Short Circuiting

## What is Short Circuiting in JavaScript?

### The `||` Operator

When working with logical operators such as AND `&&` and OR `||`, they are typically used with Boolean values (truthy and falsy), and return `true` or `false`. When using the `&&` Operator, both sides of a conditional must evaluate to `true` for it to return true. If one side evaluates to false, then it returns false. When working with the `||` Operator, only one side needs to evaluate to `true` for it to return `true`.

``````true || true
// returns true

true || false
// returns true

false || false
// returns false
``````

But, logical operators can be used with any kind of datatype. If for example, a number and a string were used in a logical operator, rather than return `true` or `false`, it would return the value itself.

`100 || 'North'`

Returns `100` rather than `true` or `false`.

## Why does this happen? What does Short Circuiting even mean?

In the above example, short circuiting means essentially that the expression is not evaluated. If the first value is truthy, then it will just return the true value, and stop evaluating.

If the first value was false however, it continues to evaluate, and then returns the value again with the second expression.

``````null || 'Hello'
// returns 'Hello'
``````

## Short Circuiting with the `&&` Operator

Short circuiting works in the complete opposite manner when it comes to the AND operator.

``````true && true
// returns true

true && false
// returns false

false && false
// returns false
``````

With the AND operator, it short circuits when the first operand is Falsy.

``````O && 'Fall'
// returns 0
``````

A longer example chaining together multiple `&&` evaluations works the same.

`console.log('Goodbye' && 100 && undefined && 'halloween')`

Will short circuit on `undefined` and automatically return `undefined`.

Using a practical example, it's possible to take advantage of short circuiting, and to shorten an if statement.

Rather than writing:

``````function a() {
console.log('a');
return false;
}

if (a()) {
console.log('Foobar')
}
// returns a
``````

We can write it as:

``````a() && console.log('Foobar')
// returns a
``````

As `a()` evaluates to false, it will short circuit, cease executing, and return only a, not continuing on to the other side of the Operator.

However, it's not necessarily always a good idea to use short circuiting in the place of the longer code of an `if` statement, because someone else coming in to read the code, might not understand what's going on. Sometimes it's better to keep things readable, rather than short. Brevity isn't always the answer.