The Nullish Coalescing Operator (??
) is a logical operator in JavaScript that returns its right-hand side operand when its left-hand side operand is null
or undefined
, and otherwise returns its left-hand side operand. This operator is particularly useful for providing default values for variables that might be nullish.
Example 1: Basic Usage with null
// Example of providing a default value for a null variable
const userName = null;
const displayName = userName ?? 'Guest';
console.log(displayName); // Output: Guest
Explanation
In this example, the userName
variable is null
. The nullish coalescing operator (??
) checks if userName
is null
or undefined
and, since it is, assigns the default value 'Guest' to the displayName
variable.
Example 2: Basic Usage with undefined
// Example of providing a default value for an undefined variable
let userAge;
const displayAge = userAge ?? 25;
console.log(displayAge); // Output: 25
Explanation
Here, the userAge
variable is declared but not assigned a value, making it undefined
. The ??
operator detects this and assigns the default value of 25
to the displayAge
variable.
Example 3: Handling a non-nullish value
// Example where the left-hand side value is used
const userLoggedIn = true;
const sessionStatus = userLoggedIn ?? false;
console.log(sessionStatus); // Output: true
Explanation
In this case, userLoggedIn
is true
, which is not null
or undefined
. Therefore, the nullish coalescing operator returns the value of userLoggedIn
itself, and sessionStatus
becomes true
.
Example 4: Working with the number 0
// Example demonstrating how 0 is treated as a valid value
const productCount = 0;
const displayCount = productCount ?? 10;
console.log(displayCount); // Output: 0
Explanation
This example highlights a key difference from the logical OR (||
) operator. Since productCount
is 0
(a falsy value, but not null
or undefined
), the ??
operator returns the left-hand side value, 0
.
Example 5: Working with an empty string
// Example demonstrating how an empty string is treated as a valid value
const userMessage = "";
const displayMessage = userMessage ?? "No message provided";
console.log(displayMessage); // Output: ""
Explanation
Similar to the previous example, an empty string (""
) is a falsy value but is not null
or undefined
. Consequently, the nullish coalescing operator returns the empty string.
Example 6: Chaining with other operators
// Example of using the nullish coalescing operator in a chain
const configuration = {
theme: null
};
const userTheme = configuration.theme ?? 'dark';
console.log(userTheme); // Output: 'dark'
Explanation
This shows how the ??
operator can be used with object properties. Since configuration.theme
is null
, the operator provides the default value 'dark' for the userTheme
.
Example 7: Providing a default object
// Example of providing a default object if one isn't defined
let userSettings = null;
const finalSettings = userSettings ?? {
darkMode: true,
notifications: 'enabled'
};
console.log(finalSettings); // Output: { darkMode: true, notifications: 'enabled' }
Explanation
In this final example, userSettings
is null
. The nullish coalescing operator sees this and assigns the entire default settings object to the finalSettings
variable.