Javascript: Short-circuit evaluation

Praveen Poonia

Follow

May 4, 2019 · 3 min read

Short-circuit evaluation also called minimal evaluation, it is the semantics of some Boolean operators in which the second argument is evaluated when the outcome of first does not suffice to determine the value of the expression.

To evaluate boolean expression first we need to be aware of truthy and falsy values in javascript. Values like null, false, 0, undefined, NaN, “” and '' are evaluated as falsy in javascript. Anything other than the falsy values is truthy in javascript.

Short-circuiting with || (Logical OR)

The Logical OR i.e || the operator first evaluates the expression on the left, if it is truthy, it returns that value. If it is falsy, it evaluates and returns the value of the right operand.

eg — setting default values

if (!currency) {
  currency  = "$";
}
//short circuting with ||
currency  = currency || "$";

As above, if currency variable is falsy, the expression on the right will be evaluated and assigned to the variable. Whereas, if currency is truthy, its value will be returned and assigned to the variable.

Short-circuiting with && (Logical AND)

The logical AND i.e && operator first evaluates the expression on the left. If it is falsy, it returns false and terminates evaluation to that expression. And, if the first expression is truthy, then it jumps to the right expression for evaluation and returns the result.

if (emailId) {
  login(emailId);
} else {
   signUp();
}
//short circuting with && and ||
emailId && login(c) || signUp();

As above, if emailId exist, then call login with emailId, otherwise, call signUp to register a new user. So login is only called when emailId is true, And if emailId is falsy then execution directly jump on signUp without calling login.

Combination or chaining of || and && operator is also sometimes called as short-circuit operator chaining. I know chaining operator code look less and funky but it is not advised to use, because it makes code less readable, even some javascript style guideline won’t allow short-circuit operator chaining.

Run below code in console to see the code execution variation in different operator short-circuits.

(function () {
    'use strict';
 
    function evaluateFirst(bool) {
        console.log('first evaluation called -->', bool);
        return bool;
    }
 
    function evaluateSecond(bool) {
        console.log('second evaluation called -->', bool);
        return bool;
    }
 
    var andWithFT = evaluateFirst(false) && evaluateSecond(true),
	andWithTF = evaluateFirst(true) && evaluateSecond(false),
        orWithTF = evaluateFirst(true) || evaluateSecond(false),
        orWithFT = evaluateFirst(false) || evaluateSecond(true),
        trinayWithTTF = true ? evaluateFirst(true) :   evaluateSecond(false);
	 
  return [andWithFT, andWithTF, orWithTF, orWithFT, trinayWithTTF];})();

You will get an array like [false, false, true, true, true]

To conclude, short-circuiting means that while evaluation of boolean expressions (logical ||and &&), execution of the code stop as soon as it finds the first condition which satisfies or negates the expression.

“Life is really simple, but we insist on making it complicated.”
― Confucius

If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇⬇