Nullish Coalescing Operator


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.