The nullish coalescing operator (??) in JavaScript is used to handle null or undefined values.
It provides a way to assign a default value when dealing with variables that might have null or undefined values.
This operator is particularly useful when you want to ensure that a variable has a valid value without mistakenly overriding falsy values like 0, false, or an empty string (“”).
Syntax
let result = variable1 ?? defaultValue;
variable1: The value to be checked.
defaultValue: The value that will be used if variable1 is null or undefined.
How It Works
The ?? operator returns the right-hand side (defaultValue) if the left-hand side (variable1) is null or undefined. Otherwise, it returns the left-hand side.
Examples
1. Basic Usage of Nullish Coalescing Operator
let user = null; let defaultUser = "Guest"; let username = user ?? defaultUser; console.log(username); // Output: "Guest"
Explanation
Here, user is null, so user ?? defaultUser returns “Guest”.
If user were a non-null or defined value, it would have returned that value.
2. Handling undefined Values
let age; let defaultAge = 25; let userAge = age ?? defaultAge; console.log(userAge); // Output: 25
Explanation
age is undefined, so age ?? defaultAge returns 25.
The nullish coalescing operator provides the default value when the variable is undefined.
3. Difference Between ?? and || (Logical OR)
The logical OR (||) operator returns the right-hand value if the left-hand value is falsy (e.g., 0, false, null, undefined, “”). In contrast, the nullish coalescing operator (??) only considers null and undefined.
let count = 0; let resultOr = count || 10; // Uses logical OR let resultNullish = count ?? 10; // Uses nullish coalescing console.log(resultOr); // Output: 10 console.log(resultNullish); // Output: 0
Explanation
count || 10 returns 10 because 0 is a falsy value.
count ?? 10 returns 0 because ?? only checks for null or undefined. Since count is 0 (not null or undefined), it is used as the result.
4. Nullish Coalescing with Strings
let userInput = ""; let defaultText = "Default Text"; let output = userInput ?? defaultText; console.log(output); // Output: ""
Explanation
userInput is an empty string (“”), which is not null or undefined.
Therefore, userInput ?? defaultText returns userInput, which is “”.
5. Using ?? with Function Parameters
You can use the nullish coalescing operator to set default values for function parameters when they are null or undefined.
function greet(name) { let displayName = name ?? "Guest"; console.log(`Hello, ${displayName}!`); } greet("Alice"); // Output: "Hello, Alice!" greet(null); // Output: "Hello, Guest!" greet(); // Output: "Hello, Guest!"
Explanation
In the greet function, name ?? “Guest” ensures that “Guest” is used if name is null or undefined.
When called with “Alice”, displayName becomes “Alice”.
When called with null or without a parameter, displayName becomes “Guest”.
6. Chaining with Multiple ?? Operators
You can chain multiple nullish coalescing operations to find the first defined value.
let val1 = null; let val2 = undefined; let val3 = "Hello"; let result = val1 ?? val2 ?? val3 ?? "Default Value"; console.log(result); // Output: "Hello"
Explanation
The expression val1 ?? val2 ?? val3 ?? “Default Value” checks each variable in sequence.
It stops at the first value that is not null or undefined, which in this case is “Hello”.
7. Combining with Other Operators
You can combine the nullish coalescing operator with other operators for more complex expressions.
let user = { name: null, age: 30 }; let userName = (user.name ?? "Unknown") + " (" + (user.age ?? "Age not provided") + ")"; console.log(userName); // Output: "Unknown (30)"
Explanation
user.name ?? “Unknown” checks if user.name is null or undefined. Since user.name is null, it returns “Unknown”.
user.age ?? “Age not provided” returns 30 since user.age is defined.
8. Handling Nested Objects with ??
You can use the nullish coalescing operator to handle nested objects and provide fallback values.
let user = { profile: { name: null } }; let displayName = user.profile.name ?? "Anonymous"; console.log(displayName); // Output: "Anonymous"
Explanation
user.profile.name is null, so user.profile.name ?? “Anonymous” returns “Anonymous”.
Summary
The nullish coalescing operator (??) is a powerful tool in JavaScript for handling null or undefined values. It provides a safe way to assign default values and prevents unexpected behavior when dealing with falsy values like 0, false, and “”.
Key Points
?? checks only for null or undefined.
It is useful for setting default values without overriding valid falsy values like 0, false, or “”.
Different from logical OR (||), which considers all falsy values.
The nullish coalescing operator is especially helpful when working with potentially null
or undefined
values in dynamic data sources like user inputs, API responses, or nested objects. It adds more control to your default value assignments.