JavaScript Short-Circuiting: Logical AND and OR

In JavaScript, short-circuit evaluation is a behavior where logical operators stop evaluating expressions as soon as the outcome is determined. This article explains the exact guarantees provided by the logical AND (&&) and logical OR (||) operators, how evaluation order is enforced, what values are returned, and how to leverage these mechanics safely in your code.

How Short-Circuiting Works

JavaScript evaluates logical expressions strictly from left to right. Because logical operations can be determined before every sub-expression is evaluated, JavaScript provides deterministic guarantees about when execution stops and what value is returned. Unlike some languages where logical operators strictly return a boolean (true or false), JavaScript returns the value of the last evaluated operand itself.

The Logical AND (&&) Guarantees

The logical AND operator (expr1 && expr2) requires all operands to be truthy for the overall expression to be truthy. It guarantees the following behavior:

  1. Left-to-Right Evaluation: expr1 is always evaluated first.
  2. Immediate Halting on Falsy Values: If expr1 evaluates to a falsy value (false, 0, "", null, undefined, NaN, or -0), the JavaScript engine immediately stops evaluation. expr2 is never executed or evaluated.
  3. Return Value Guarantee:
    • If expr1 is falsy, the expression returns the actual value of expr1.
    • If expr1 is truthy, the engine evaluates and returns the actual value of expr2.

Example:

function getSettings() {
  console.log("Fetching settings...");
  return { theme: "dark" };
}

const isLoggedIn = false;
// getSettings() will NOT be executed because isLoggedIn is falsy
const userTheme = isLoggedIn && getSettings(); 

console.log(userTheme); // Output: false

The Logical OR (||) Guarantees

The logical OR operator (expr1 || expr2) requires only one operand to be truthy for the overall expression to be truthy. It guarantees the following behavior:

  1. Left-to-Right Evaluation: expr1 is always evaluated first.
  2. Immediate Halting on Truthy Values: If expr1 evaluates to a truthy value (any value not considered falsy), the JavaScript engine immediately stops evaluation. expr2 is never executed or evaluated.
  3. Return Value Guarantee:
    • If expr1 is truthy, the expression returns the actual value of expr1.
    • If expr1 is falsy, the engine evaluates and returns the actual value of expr2.

Example:

function calculateDefault() {
  console.log("Calculating default...");
  return 100;
}

const customLimit = 50;
// calculateDefault() will NOT be executed because customLimit is truthy
const finalLimit = customLimit || calculateDefault();

console.log(finalLimit); // Output: 50

Guarantees Regarding Side Effects

Because of these short-circuiting rules, any function calls, variable assignments, or side effects present in the right-hand operand will not occur if the left-hand operand satisfies the exit condition:

This property makes && useful as a guard operator (e.g., user && user.save()) and || useful for fallback values, provided the nuances of JavaScript falsy values (like 0 or empty strings) are accounted for.