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.

Further Reading

Here is a really great, and long example explaining short circuiting in JavaScript from stack overflow

Codeburst.io JavaScript: What is Short-circuit Evaluation?