JavaScript Nullish Coalescing Operator Guide with Examples

The JavaScript nullish coalescing operator (??) gives a default value when a variable is null or undefined.

Understand the Nullish Coalescing Operator in JavaScript

The nullish coalescing operator uses two question marks ??. It checks if a value equals null or undefined.

It returns the right-hand side when the value equals null or undefined and returns the left-hand side when the value is not null or undefined.

The syntax looks like this:

let result = value ?? defaultValue;

You write it like this to avoid errors. If value equals null or undefined, then result equals defaultValue. If value has a valid value, then result equals that value.

Here is a list that shows you the reasons for this operator:

• It avoids unwanted fallback for values like 0 or "".
• It works only with null and undefined.
• It provides predictable control in expressions.

Here is a quick example:

let name = null;
let finalName = name ?? "Anonymouse";
console.log(finalName);

This returns "Anonymouse". The variable name equals null, so the operator gives the right-hand side.

The Difference Between Nullish Coalescing and Logical OR

Logical OR uses || and checks if a value equals any falsy type. Falsy types include 0, false, “”, null, and undefined. Nullish coalescing uses these ?? to check only null, and undefined.

Here is a table that shows you the key differences:

Here is the use case for each one:

• Use ?? when you want default values only for null or undefined.
• Use || when you want default values for all falsy cases.

Combine Nullish Coalescing with Optional Chaining

Optional chaining ?. stops access errors in nested objects. You can combine it with ?? to provide fallback values.

Here is an example:

let user = {};
let city = user.address?.city ?? "Unknown";
console.log(city);

This gives "Unknown" and the object has no address, so the operator gives you an extra value.

let user = { address: { city: "Paris" } };
let city = user.address?.city ?? "Unknown";
console.log(city);

This returns "Paris". The property exists, so the operator uses its actual value.

Examples of Nullish Coalescing Operator in JavaScript

Handle null values:

let score = null;
let finalScore = score ?? 50;
console.log(finalScore);

This returns 50 and the value equals null, so the operator switches to the fallback number.

The difference between zero and null:

let points = 0;
let displayPoints = points ?? 10;
console.log(displayPoints);

This gives 0. The operator does not treat zero as null or undefined.

Work with nested objects:

let profile = {};
let age = profile.details?.age ?? 18;
console.log(age);

This returns 18 and the optional chain fails to access details, so the operator provides you with a fallback.

Combine with the function return values:

function getMessage() {
  return null;
}
let message = getMessage() ?? "Default message";
console.log(message);

This prints "Default message". The function returns null, so the operator uses the string.

Wrapping Up

You learned what the nullish coalescing operator does and how to use it.
You also saw the difference between ?? and ||, and how to combine ?? with optional chaining.

Here is a quick recap:

• ?? checks only null and undefined.
• || checks all falsy values.
• Combine ?. and ?? to access nested values safely.
• Use examples to test both simple and advanced cases.

FAQs

let value = null ?? "default";
console.log(value); // "default"

let num = 0 ?? 10;
console.log(num); // 0

let a = 0 || 5;
console.log(a); // 5

let b = 0 ?? 5;
console.log(b); // 0

function greet(name) {
  let user = name ?? "Guest";
  console.log("Hello " + user);
}

greet("John"); // Hello John
greet(null);   // Hello Guest

let user = {};
console.log(user.profile?.name ?? "Unknown"); // "Unknown"

user = { profile: { name: "Alice" } };
console.log(user.profile?.name ?? "Unknown"); // "Alice"

Similar Reads