With the “recent” introduction of the
?? operator and the already existing
ternaries, it doesn’t make sense to use short circuits anymore, but I still see
them in code bases from time to time. In this article, I’ll go over examples of
short circuits, why they are bad, and what alternatives you can use instead.
and logical OR (
||). These operators evaluate expressions and return a value
based on the truthiness or falsiness of the operands involved.
The logical AND (
&&) operator evaluates to the value of the first falsy
operand, or the last truthy operand if all operands are truthy. It performs
short circuit evaluation, meaning that if the first operand is falsy, it doesn’t
evaluate the second operand as the result would always be falsy.
On the other hand, the logical OR (
||) operator returns the value of the first
truthy operand, or the last falsy operand if all operands are falsy. It performs
short circuit evaluation, meaning that if the first operand is truthy, it
doesn’t evaluate the second operand as the result would always be truthy.
While short circuits can be useful in certain scenarios, they can introduce subtle bugs and make code harder to reason about. Here are some reasons why short circuits can be problematic:
Every scenario where we use a short circuit, we could be using a ternary,
nullish coalescing, or even an
if statement, and it would be more readable.
The more we rely on short circuits, the harder it is to reason about our code:
Is really easy to introduce side effects accidentally by using short circuits.
something is evaluated as falsy or truthy, then based on the operator we use
|| then we might return said value unintentionally):
This also applies to some cases for JSX code:
Ideally, when we have conditional logic, it should rely on boolean logic, not falsy/truthy values, tho this applies to conditions in general, not only short circuits. This is because the intention of the code is way clearer:
The second example is way more readable and doesn’t rely in a flaky type coercion.
To mitigate the issues associated with short circuits, it is advisable to consider alternative approaches that promote code clarity, maintainability, and reliability. Here are a few alternatives to consider:
One of the most common uses of short circuits is to access a property that might be undefined, and to have a default value for it, like this:
This can be problematic if
0 for example, or any other
falsy value which would be valid, but using
|| we fallback to
Nowadays we have tools designed for this very thing, that are way better because
instead of relying in truthiness, they rely in nullish values (
This last example works pretty similarly to the one before, but if the value of
0, it will evaluate to
0 instead of
only goes to
Continuing with the previous example, we might actually want to have a default
value if the value is
0, but then we go back to the conversation about
readability. Is better to express it like this:
Longer? Yes, but also it makes our intention way clearer than
value || "default".
Generally speaking, hacky code is bad code, because it’s exploiting a language “effect” as it was a language “feature”, so relying on any code that does this is not the best idea in the world. Short circuits are some of the worst kinds of hacky code because is not only abusing the language, but is also making it harder to maintain and read. The “benefits” (such as “writing less” and “feeling smart”) are heavily outweighed by the issues they introduce.
Next time you’re considering using a short circuit, make yourself and everyone else a favor and use language features designed for what you’re trying to achieve.