Short-Circuit Evaluation

Easy

Short-circuit evaluation means logical operators stop evaluating as soon as the result is determined. && returns the first falsy value (or the last value if all are truthy), and || returns the first truthy value (or the last value if all are falsy). This behavior enables powerful patterns like default values, conditional execution, and guard clauses.

Interactive Visualization

String Immutability

Step 1: Create
let str = "hello";
Output
"hello"
1 / 4

Key Points

  • && returns the first falsy value, or the last value if all are truthy
  • || returns the first truthy value, or the last value if all are falsy
  • Both operators return actual values, not necessarily booleans
  • Falsy values: false, 0, "", null, undefined, NaN (6 total)
  • || treats 0 and "" as falsy — use ?? when you need only null/undefined
  • Short-circuit means the right side may never execute

Code Examples

&& Returns First Falsy or Last Value

console.log("hello" && 42);        // 42 (both truthy → last)
console.log("hello" && 0 && 42);   // 0 (first falsy)
console.log(null && "hello");      // null (first falsy)
console.log(1 && 2 && 3);          // 3 (all truthy → last)

// Conditional execution
const user = { name: "Alice", isAdmin: true };
user.isAdmin && console.log("Welcome, admin!");

&& evaluates left-to-right and returns the first falsy value. If all truthy, returns the last one.

|| Returns First Truthy or Last Value

console.log("hello" || "world");   // "hello" (first truthy)
console.log("" || "default");      // "default" (empty string is falsy)
console.log(null || undefined || "found"); // "found"

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

|| evaluates left-to-right and returns the first truthy value. If all falsy, returns the last one.

The || Trap: 0 and Empty String

function getPort(port) {
  return port || 3000;
}
console.log(getPort(8080));  // 8080 ✓
console.log(getPort(0));     // 3000 ✗ (0 is a valid port!)

// Fix: use ?? (nullish coalescing)
function getPortSafe(port) {
  return port ?? 3000;
}
console.log(getPortSafe(0));     // 0 ✓
console.log(getPortSafe(null));  // 3000 ✓

|| replaces all falsy values including 0 and "". Use ?? when only null/undefined should trigger the default.

Short-Circuit Side Effects

let counter = 0;
function increment() { counter++; return counter; }

false && increment();  // increment() never called!
console.log(counter);  // 0

true && increment();   // increment() runs
console.log(counter);  // 1

"hello" || increment(); // increment() never called!
console.log(counter);   // 1

// Safe property access chain (before ?.)
const user = null;
const name = user && user.profile && user.profile.name;
console.log(name); // null (safe — no TypeError)

Short-circuiting means the right operand may never execute. This is used for guard clauses and safe access chains.

Common Mistakes

  • Using || for defaults when 0 or "" are valid values (use ?? instead)
  • Forgetting that && and || return actual values, not booleans
  • Not knowing all 6 falsy values: false, 0, "", null, undefined, NaN
  • Assuming the right side of && or || always executes

Interview Tips

  • Explain that && and || return values, not just true/false
  • Know when to use || vs ?? — the classic 0 and "" trap
  • Demonstrate how && can replace simple if statements
  • List all 6 falsy values without hesitation

Related Concepts

Operators

Arithmetic, comparison, and logical

Nullish Coalescing (??)

Default values for null/undefined only

Logical Assignment Operators

??=, ||=, &&= operators