Logical Operators & Nullish Coalescing (??)

In Plain English

Logical operators (&&, ||, !) combine conditions and short-circuit evaluation. The nullish coalescing operator (??) provides safe fallback values specifically for null and undefined (unlike || which treats 0 and "" as falsy).

The Mental Model

"The || operator is like a greedy filter that rejects anything empty (including 0 and empty strings). The ?? operator is a precision laser that only replaces actual missing items (null and undefined)."

Deep Dive: How It Works

Short-Circuiting: In a && b, if a is falsy, b is never evaluated. In a || b, if a is truthy, b is skipped.

Nullish Coalescing (??): Returns the right-hand operand only if the left-hand is null or undefined.

Optional Chaining (?.): Safely reads nested properties without throwing if an intermediate value is nullish: user?.profile?.avatar.

Syntax Blueprint

const value = input ?? "default_fallback"

Use ?? when 0 or "" are valid legitimate values that should not be overridden by a fallback.

Core Rules to Remember

&& (AND): Returns the first falsy operand, or the last operand if all are truthy.

|| (OR): Returns the first truthy operand, or the last operand if all are falsy.

?? (Nullish): Returns the right operand only if left is null or undefined.

Common Beginner Traps & How to Fix Them

Mistake:Using || for default numbers when 0 is valid.

Why it happens: const count = 0 || 10; sets count to 10 because 0 is falsy.

How to fix: Use ?? instead: const count = 0 ?? 10; correctly sets count to 0.

Pro Tip: Combine optional chaining and nullish coalescing for rock-solid object data extraction: const theme = config?.theme ?? "dark";

Live Interactive Example

Hit Run Code to see it live

Short-Circuit and Nullish Coalescing

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Demonstrates why ?? is essential when dealing with legitimate 0 or empty string values.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Provide a safe fallback with ??

Given let customTimeout = null;
const timeout = customTimeout ?? 3000;
Print "Active Timeout: 3000 ms".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

Short-Circuiting: In a && b, if a is falsy, b is never evaluated. In a || b, if a is truthy, b is skipped.

Nullish Coalescing (??): Returns the right-hand operand only if the left-hand is null or undefined.

Optional Chaining (?.): Safely reads nested properties without throwing if an intermediate value is nullish: user?.profile?.avatar.