? JavaScript Nullish Coalescing

⚡ Quick Overview

The nullish coalescing operator ?? lets you provide a default value only when a variable is null or undefined. Unlike the logical OR operator (||), it does not treat other falsy values such as 0, false, or '' as “empty”.

This is especially useful when you want to keep valid falsy values and avoid accidentally overwriting them with a default.

? Key Concepts

• ?? checks only for null and undefined (called “nullish” values).
• Values like 0, false, and '' are kept as they are and do not trigger the default.
• Useful for default values in API data, configs, and optional parameters.
• Often combined with optional chaining (?.) to safely access nested properties.

? Syntax and Theory

Basic syntax of the nullish coalescing operator:

let result = value ?? defaultValue;
// If value is null or undefined → result = defaultValue
// Otherwise                     → result = value

Think of ?? as “use the left side if it is defined, otherwise fall back to the right side”.

? Basic Usage

Use ?? to provide safe defaults without losing valid falsy values:

let name;
let displayName = name ?? 'Guest';
console.log(displayName); // 'Guest'

let count = 0;
let total = count ?? 10;
console.log(total); // 0 (not 10, because 0 is not null or undefined)

? Difference from OR Operator

The logical OR operator (||) treats many values as falsy (0, '', false, null, undefined, etc.). The nullish coalescing operator (??) only treats null and undefined as needing a default.

let value = '';
console.log(value || 'Default'); // 'Default' because '' is falsy
console.log(value ?? 'Default'); // '' because '' is not nullish

Use ?? when you want to preserve valid falsy values and only replace null or undefined.

? With Optional Chaining

Combine optional chaining (?.) and nullish coalescing for safer defaulting when dealing with nested objects or API responses.

const user = {
profile: {
name: 'Alex'
}
};

const username = user.profile?.name ?? 'Anonymous';
console.log(username); // 'Alex'

const settings = {};
const theme = settings.preferences?.theme ?? 'light';
console.log(theme); // 'light' because preferences is undefined

? Use Cases

• Providing default values for optional configuration options.
• Handling missing fields in API responses cleanly.
• Setting fallback text for UI labels when data is null or undefined.
• Safely reading nested properties with optional chaining and default values.