JavaScript Nullish Coalescing Operator

You often need a fallback value when an API, form, or configuration does not provide one. The JavaScript nullish coalescing operator (??) helps you add that fallback without replacing useful values.

Use ?? when 0, false, or an empty string should remain unchanged. It checks only for null and undefined, which makes your default-value logic clear and predictable.

What Is the JavaScript Nullish Coalescing Operator?

The nullish coalescing operator returns the value on its left unless that value is null or undefined. When the left value is nullish, JavaScript returns the fallback on the right.

This behavior helps you handle missing user details, optional settings, API fields, and form values without losing valid data.

JavaScript Nullish Coalescing Syntax

Place ?? between the value you want to check and its fallback.

Syntax:

// Use the fallback only when value is null or undefined
const result = value ?? fallback;

JavaScript evaluates the right side only when the left side is nullish.

Example:

const userName = null;
const displayName = userName ?? "Guest"; // Use Guest for null

console.log(displayName); // Guest

Note: Use ?? when you want to preserve valid falsy values.

How Nullish Values Work

You can use ?? with any JavaScript value, but only null and undefined activate the fallback.

Example:

console.log(null ?? "Not available");      // Not available
console.log(undefined ?? "Not available"); // Not available
console.log(0 ?? 100);                      // 0
console.log(false ?? true);                 // false
console.log("" ?? "No value");              // Empty string

The last three values are falsy, but they still carry information. The operator keeps them as they are.

Difference Between ?? and ||

The logical OR operator (||) uses its fallback for every falsy value. The nullish coalescing operator uses its fallback only for null and undefined.

Comparison:

Choose ?? when a zero value has a real meaning, such as the number of items in a cart.

Example:

const itemCount = 0;

console.log(itemCount || 10); // 10: zero is replaced
console.log(itemCount ?? 10); // 0: zero is preserved

Use ?? with Optional Chaining

Combine optional chaining (?.) with ?? when you read a nested property that may not exist. Optional chaining returns undefined for the missing property, and ?? supplies your fallback.

Example:

const user = {
  profile: {
    displayName: "Amit"
  }
};

const name = user.profile?.displayName ?? "Guest"; // Read safely
console.log(name); // Amit

If profile or displayName is missing, the result becomes "Guest".

Use the Nullish Coalescing Assignment Operator

Use ??= to assign a fallback directly to a variable or object property. JavaScript performs the assignment only when the current value is nullish.

Example:

const settings = {
  notifications: false
};

settings.theme ??= "light";         // Add a missing setting
settings.notifications ??= true;    // Keep false

console.log(settings);
// { notifications: false, theme: "light" }

Mixing ?? with && or ||

Do not mix ?? directly with && or || in one expression. JavaScript reports a syntax error. Add parentheses to show the order you want.

Invalid Example:

// SyntaxError: operators are mixed without parentheses
const result = null || undefined ?? "Fallback";

Correct Example:

// Parentheses make the evaluation order clear
const result = (null || undefined) ?? "Fallback";

console.log(result); // Fallback

Practical Uses of ??

You can use the nullish coalescing operator to:

• Provide defaults for missing API fields
• Read optional application settings
• Preserve numeric values such as 0
• Preserve Boolean values such as false
• Display fallback text for missing object properties

Example:

const product = {
  name: "Keyboard",
  discount: null
};

const discount = product.discount ?? 0; // Default missing discount to 0
console.log(discount); // 0

Conclusion

The JavaScript nullish coalescing operator gives you a precise way to handle missing values. Use ?? to preserve meaningful falsy values, combine it with ?. for nested data, and use ??= when you need to assign a fallback.