This is how Short-circuiting works in Javascript

Benyam
3 min readApr 17, 2021

For the uninitiated — I am sorry but this blog article is anything but how you learn javascript quicker i.e. short-circuit it. If you know how please let me know.

On a more positive note, the kind of short-circuiting we are going to explore here is not akin to the fire or explosion caused by excessive electric current passing through an unintended low resistance circuit. That is a relief if you ask me.

In javascript and a few programming languages when the evaluation of a logical expression stops because the overall value is already known, it is called short-circuiting the evaluation.

Short-circuit evaluation, minimal evaluation, or McCarthy evaluation (after John McCarthy) is the semantics of some Boolean operators in some programming languages in which the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression: when the first argument of the AND function evaluates to false, the overall value must be false; and when the first argument of the OR function evaluates to true, the overall value must be true. Source (Wikipedia)

Nothing illustrates better than an example so here is one and as tradition has it I will borrow from stack overflow.

As you probably guessed it the first non-falsy evaluation which is 4 is the answer. This is because “a” is undefined which evaluates to falsy . Also null is falsy.

This is where the name came from as “e” is not even reached at a.k.a the logical statement short circuits.

The idea is that logical expressions are read left to right. And if the value of the left condition is enough to get the total value, the right condition will not be processed and evaluated. Put simply, Javascript doesn’t even bother checking if the information is enough to reach a decision.

This is not completely unintuitive but there are some gotchas and cases we need to be aware of.

  1. One of them is operator precedence which you can refer to here.

What do you think this returns?

console.log(true || false && false);

It actually evaluates to true because the && has precedence over ||.

We can overcome the issue of operator precedence by simply putting our expressions in parentheses-problem solved.

2. The second one is the distinction between strict and non-strict inequality. Depending on the particular case, you may want to be sure which one to use to avoid unexpected behavior.

To provide one more example, we can use short-circuiting to create an object if a value does not exist or the memory address has no value.

At the risk of making this blog post too long to read I feel obliged to give some useful takeaways as to when to use the concept of shortcircuiting like a coding ninja.

a. Put evaluations that require more computation(s) last just in case the other less intensive evaluation(s) return true.

b. Put code that is more likely to return true first for || and last for &&

like so

moreLikelyTrue||lessLikelyTrue

lessLikelyTrue && moreLikelyTrue

Thanks for reading and please feel free to comment.

--

--