The JavaScript nullish coalescing operator (??) gives a default value when a variable is null or undefined.
Table of Content
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
0or"". - It works only with
nullandundefined. - 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:
| Operator | Condition | Result |
|---|---|---|
?? | Checks only null and undefined | Check for a false or true value |
| || | Check for false or true value | return 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 fornullorundefined. - 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 onlynullandundefined.||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?
?? 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?
|| 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); // 0How do you use Nullish Coalescing with functions?
?? 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 GuestCan Nullish Coalescing Operator be combined with Optional Chaining?
?. 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 moves fast, and new features come. Some browsers do not support these features and cause issues for users. Developers…
JavaScript includes Math.sign to find out if a number is positive. It also helps detect negative values or zero. It…
You will learn what the JavaScript valueOf function does and how it works. It returns the primitive value of an…
Math.sin() in JavaScript gives the sine of a number. This number must be in radians. You use it to work…
Mocha is a JavaScript test framework for Node.js. It runs tests in sequence and shows results. It works with any…
JavaScript optional chaining lets you access object values without runtime errors. It checks if a property exists before access and…
Arrays often hold other arrays. This happens with API responses, form data, or nested objects. These layers add extra steps…
The assignment operator in JavaScript stores and updates values. It helps you hold data in a variable and change it…
Some numbers do not stay whole. You get decimal parts when you divide or calculate prices. You may need to…
JavaScript switch statement checks many values without long chains. It appeared to replace stacked conditions that slow you down. Understand…