JavaScript Nullish Coalescing Operator Guide with Examples

javascript nullish coalescing operator

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:

OperatorConditionResult
??Checks only null and undefinedCheck for a false or true value
||Check for false or true valuereturn one of the two sides that has a true value

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

What is JavaScript Nullish Coalescing Operator?

The ?? operator returns the right value only if the left side is null or undefined. It ignores 0, false, and "" unlike the OR operator.

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

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

What is the difference between Nullish Coalescing and OR?

The || operator treats 0, false, and "" as false values. The ?? operator only checks null or undefined.
let a = 0 || 5;
console.log(a); // 5

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

How do you use Nullish Coalescing with functions?

You can use ?? to set default values for function arguments.
function greet(name) {
  let user = name ?? "Guest";
  console.log("Hello " + user);
}

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

Can Nullish Coalescing Operator be combined with Optional Chaining?

Yes, you can combine ?. with ?? to avoid errors when accessing nested properties.
let user = {};
console.log(user.profile?.name ?? "Unknown"); // "Unknown"

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

Similar Reads

JavaScript Polyfilling & Transpiling Guide for Beginners

JavaScript moves fast, and new features come. Some browsers do not support these features and cause issues for users. Developers…

Math.sign in JavaScript: Check Number Signs

JavaScript includes Math.sign to find out if a number is positive. It also helps detect negative values or zero. It…

JavaScript valueOf Function: How it Works with Examples

You will learn what the JavaScript valueOf function does and how it works. It returns the primitive value of an…

JavaScript Math sin Function with Syntax and Uses

Math.sin() in JavaScript gives the sine of a number. This number must be in radians. You use it to work…

Mocha JavaScript Test Framework: Guide and Examples

Mocha is a JavaScript test framework for Node.js. It runs tests in sequence and shows results. It works with any…

JavaScript Optional Chaining “?”: How it Works with Examples

JavaScript optional chaining lets you access object values without runtime errors. It checks if a property exists before access and…

Flatten an Array in JavaScript: Use flat() to Handle Nested Arrays

Arrays often hold other arrays. This happens with API responses, form data, or nested objects. These layers add extra steps…

Assignment Operator in JavaScript with Examples

The assignment operator in JavaScript stores and updates values. It helps you hold data in a variable and change it…

JavaScript Math ceil: Round Numbers with Precision

Some numbers do not stay whole. You get decimal parts when you divide or calculate prices. You may need to…

JavaScript switch Statement: Syntax and Examples

JavaScript switch statement checks many values without long chains. It appeared to replace stacked conditions that slow you down. Understand…

Previous Article

Mocha JavaScript Test Framework: Guide and Examples

Next Article

HTML Deprecated Tags and Modern Alternatives List

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Get Updates

Get the latest updates on Coding, Database, and Algorithms straight to your inbox.
No spam. Unsubscribe anytime.