What is Short Circuit Evaluation in JavaScript?

What is Short Circuit Evaluation in JavaScript?

Ferenc Almasi β€’ πŸ”„ 2023 April 19 β€’ πŸ“– 2 min read

Short circuit evaluation can make your code more concise, and easier to understand, and it can also help you avoid having some TypeErrors in some cases. So what is short circuit evaluation anyway?

Short-circuit evaluation isΒ the semantics of boolean operators in which the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression. β€” Wikipedia

There are three logical operators in JavaScript, and these are Logical AND (denoted by &&), Logical OR (denoted by ||), and Logical NOT (denoted by !), from which two can be used for short circuits. They are the logical AND, and logical OR operators.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Logical AND

The logical AND operator, returns the second expression, only if the first expression evaluates to false. Let's take a look at an example:

// Short circuit (set short ifs) with logical AND
hasFireworks && makeItFestive();

// Is equivalent to:
if (hasFireworks) {
    makeItFestive();
}
Copied to clipboard!

As you can see from the code example above, this is equivalent to creating an if statement. Only if hasFireworks evaluates to true, it will execute the function defined after it. We can of course also use a ternary operator in order to introduce an else statement:

hasFireworks ? makeItFestive() : makeItChill();
Copied to clipboard!

Logical OR

The Logical OR operator on the other hand returns the first expression if it can be converted to true. Otherwise, it will look at the next expression and return that instead:

// Short circuit (set default values) with logical OR
const fileName = this.fileName || '😢';
Copied to clipboard!

This can be useful for setting default values during variable assignments. If this.fileName is undefined, the emoji will be used as a fallback value. You can of course further chain this (just like for the logical AND operator) and it will return with either the first expression that evaluates to true, or the very last one:

const fileName = this.fileName || this.timestamp || '😢';
Copied to clipboard!

If the filename is not set, it will try to use the timestamp. If that is unset as well, it will fallback to the emoji. So starting from the left, we are defining preferences for the file name, and if one of them fails, we try to use the next one in the line.

What is Short Circuit Evaluation?
If you would like to see more webtips, follow @flowforfrank

50 JavaScript Interview Questions
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended