JavaScript Logical Short Circuiting: Complete Guide

Short-circuiting is the behavior where JavaScript stops evaluating a logical expression as soon as the answer is certain. If AND finds a falsy value on the left, it does not bother checking the right because the whole expression can never be true. If OR finds a truthy value on the left, it skips the right because the expression is already true.

This is not just an optimization detail. Short-circuiting is a feature you can use intentionally to write cleaner, more concise code.

How && (AND) Short-Circuits

&& returns the first falsy value it finds. If every value is truthy, it returns the last value:

javascript

console.log(0 && "hello");     // 0         (falsy, short-circuits here)
console.log(false && "world"); // false     (falsy, short-circuits here)
console.log("hi" && "there");  // "there"   (both truthy, returns last)
console.log(true && 42);       // 42        (both truthy, returns last)

The rule: AND walks left to right. The moment it hits a falsy value, it stops and returns that value. If it makes it to the end, it returns the last value.

The diagram shows the simple decision: if the left side is falsy, the right side never runs.

How || (OR) Short-Circuits

|| returns the first truthy value it finds. If every value is falsy, it returns the last value:

javascript

console.log("hello" || "world"); // "hello" (truthy, short-circuits here)
console.log(0 || "fallback");    // "fallback" (0 is falsy, keep going)
console.log("" || 0 || "last");  // "last"   (first two are falsy)
console.log(null || undefined);  // undefined (both falsy, returns last)

The rule: OR walks left to right. The moment it hits a truthy value, it stops and returns it. If none are truthy, it returns the last value.

Practical Uses of Short-Circuiting

Default values with ||

Before the nullish coalescing operator (??) arrived, OR was the standard way to set fallback values:

javascript

function greet(name) {
  const displayName = name || "Guest";
  console.log("Hello, " + displayName);
}
 
greet("Alice"); // "Hello, Alice"
greet("");      // "Hello, Guest"  (empty string is falsy)
greet();        // "Hello, Guest"  (undefined is falsy)

Be careful: OR treats 0, an empty string, and false as falsy. If those are valid values in your program, use the nullish coalescing operator instead, which only falls back on null and undefined.

Conditional execution with &&

You can use AND to run a function only when a condition is true:

javascript

const isLoggedIn = true;
 
isLoggedIn && console.log("Welcome back!"); // "Welcome back!"

This reads as "if isLoggedIn is truthy, run the log statement." It is a shorter alternative to a single-line if statement:

javascript

// Same thing, different style
if (isLoggedIn) {
  console.log("Welcome back!");
}

This pattern is common in React for conditional rendering, where a component should only appear when a condition is true. The AND short-circuit skips rendering the component entirely when the left side is falsy, instead of writing a separate if check around the markup:

javascript

{isLoading && <Spinner />}

Guarding against null or undefined

Reaching several levels into a nested object is risky when an early property might be missing. Before optional chaining (?.) existed, AND was used to safely access nested properties without crashing the script:

javascript

const user = null;
 
// Without short-circuiting, this would throw: Cannot read properties of null
const city = user && user.address && user.address.city;
 
console.log(city); // undefined (safe, no error)

Today, optional chaining is the cleaner way to do this, but you will still see the AND pattern in older code.

What Not to Do with Short-Circuiting

Never put side effects on the right side of ||

If the right side of OR is a function that does something important, that function might never run:

javascript

// Dangerous: saveToDatabase may never be called
const result = cachedValue || saveToDatabase(data);

If cachedValue is truthy, the save call is skipped entirely. The reader might assume it always runs. Write this as an explicit if statement instead:

javascript

let result = cachedValue;
if (!result) {
  result = saveToDatabase(data);
}

Do not nest short-circuit expressions

Chaining several AND and OR operators together technically works, but it forces the reader to trace precedence and short-circuiting rules at the same time. This is hard to read, even though it works:

javascript

const message = isError && "Failed" || isSuccess && "Done" || "Pending";

A confused reader has to mentally parse the precedence and short-circuiting in their head. Use an if/else chain or a ternary instead:

javascript

const message = isError ? "Failed" : isSuccess ? "Done" : "Pending";

The ternary version is still chained, but the question mark and colon separators make each branch visually distinct.

Short-Circuiting with Nullish Coalescing (??)

The ?? operator also short-circuits, but with a narrower rule: it only skips the right side when the left side is null or undefined, not for other falsy values:

javascript

console.log(0 || 10);   // 10  (0 is falsy, falls through)
console.log(0 ?? 10);   // 0   (0 is not null/undefined, kept)
console.log("" || "x"); // "x" ("" is falsy, falls through)
console.log("" ?? "x"); // ""  ("" is not null/undefined, kept)

Use ?? when 0, an empty string, and false are meaningful values in your context. Use OR when any falsy value should trigger the fallback.

Short-Circuiting vs if Statements

Choose the form that makes your intent clearest. Short-circuiting is a tool, not a style requirement.