Deep Comparison of ?? vs || in JavaScript: When to Use Nullish Coalescing vs Logical OR

Core Differences in Operator Behavior Mechanisms

In JavaScript, both the logical OR operator || and the nullish coalescing operator ?? are used to provide default values, but they operate on fundamentally different evaluation logic. The logical OR operator works based on the concept of "falsy" values—returning the right-hand operand when the left-hand operand is falsy. JavaScript falsy values include: false, 0, "" (empty string), null, undefined, NaN, and 0n (BigInt zero).

Critical Scenario Analysis of Falsy Value Handling

The logical OR operator can produce unexpected results when dealing with certain valid but falsy data. Consider the following scenarios:

let temperature = 0;
let displayTemp = temperature || "Not recorded";
console.log(displayTemp); // Output: "Not recorded"

let userPreference = false;
let showNotifications = userPreference || true;
console.log(showNotifications); // Output: true

let emptyName = "";
let userName = emptyName || "Anonymous";
console.log(userName); // Output: "Anonymous"

In these examples, 0, false, and "" are all valid program states, but the logical OR operator treats them as "missing values," defaulting to the alternative. This can lead to data loss or logical errors.

Precise Handling with the Nullish Coalescing Operator

The nullish coalescing operator ?? introduces more precise evaluation logic: it returns the right-hand operand only when the left-hand operand is null or undefined. This design preserves the semantic integrity of other falsy values:

let temperature = 0;
let displayTemp = temperature ?? "Not recorded";
console.log(displayTemp); // Output: 0

let userPreference = false;
let showNotifications = userPreference ?? true;
console.log(showNotifications); // Output: false

let emptyName = "";
let userName = emptyName ?? "Anonymous";
console.log(userName); // Output: ""

This distinction is crucial for applications that need to differentiate between "no value" and "valid zero value," such as form inputs, configuration settings, and numerical calculations.

Complete Behavioral Comparison Examples

A systematic comparison clearly demonstrates the behavioral differences between the two operators across various data types:

// Numeric scenarios
console.log(42 || "default");    // 42
console.log(42 ?? "default");    // 42
console.log(0 || "default");     // "default"
console.log(0 ?? "default");     // 0

// String scenarios
console.log("text" || "default"); // "text"
console.log("text" ?? "default"); // "text"
console.log("" || "default");    // "default"
console.log("" ?? "default");    // ""

// Boolean scenarios
console.log(true || "default");  // true
console.log(true ?? "default");  // true
console.log(false || "default"); // "default"
console.log(false ?? "default"); // false

// Special value scenarios
console.log(NaN || "default");   // "default"
console.log(NaN ?? "default");   // NaN
console.log(0n || "default");    // "default"
console.log(0n ?? "default");    // 0n

// Nullish scenarios (identical behavior)
console.log(null || "default");      // "default"
console.log(null ?? "default");      // "default"
console.log(undefined || "default"); // "default"
console.log(undefined ?? "default"); // "default"

Standard Support and Best Practices

The nullish coalescing operator, as part of the ES2020 standard, enjoys broad support in modern JavaScript environments. It can be safely used in Node.js 14+, modern browsers, and TypeScript 3.7+. Given its precise semantics and reduced potential for unexpected behavior, it is recommended to prioritize the ?? operator in most default value scenarios.

However, the logical OR operator remains valuable in certain specific contexts:

// Scenario 1: Explicit need to filter all falsy values
let userInput = "";
let processedInput = userInput || "default input"; // Intentionally filtering empty strings

// Scenario 2: Legacy environment compatibility requirements
// When targeting environments without ES2020 support, use || or conditional expressions

// Scenario 3: Boolean logic conversion
let isEnabled = configValue || false; // Explicit conversion to boolean

Developers should choose operators based on specific needs: use ?? when distinguishing between "no value" (null/undefined) and "valid falsy value"; use || when filtering all falsy values or dealing with legacy environments.

Practical Application Recommendations

In actual development, the following guidelines are recommended:

1. For configuration values and user inputs, prefer ?? to preserve valid values like 0, false, and ""
2. In API response handling, use ?? to differentiate between "field absent" and "field with falsy value"
3. Use || in scenarios requiring backward compatibility or explicit filtering of all falsy values
4. In TypeScript projects, leverage the type system in combination with ?? for more precise type inference

By understanding the subtle differences between these two operators, developers can write more robust and predictable JavaScript code, avoiding common errors caused by improper falsy value handling.