Nullish Coalescing Operator in JavaScript

The nullish coalescing operator (??) is a logical operator that allows providing a default value when an expression is null or undefined.

This operator, introduced in ECMAScript 2020 (ES11), provides a more precise and clear way to handle null and undefined values (compared to other traditional approaches like using ||).

The nullish coalescing operator is very useful for simplifying and improving the readability of code when working with values that contain null or undefined.

Syntax of the nullish coalescing operator

The syntax of the nullish coalescing operator is simple:

let result = value1 ?? value2;

For example, in this case

let username = user.name ?? 'No idea, mate';

console.log(username); // 'No idea, mate'

Combination with other operators

The ?? operator fits wonderfully well (❤️) with other operators like the optional chaining operator ?..

let username = user?.name ?? 'Unknown';
console.log(username); // 'Unknown'

Comparison with other methods of handling null values

Traditional Conditionals

In earlier versions of JavaScript, handling null and undefined values was done using conditionals (||).

let name = value || 'User';

This is quite worse, as || considers any falsy value (like 0, false, '', etc) as a reason to use the default value.

Therefore, it doesn’t really respond to undefined or null, but to a bunch of things!

Ternary Operator

The ternary operator is another alternative for handling null values. Although it is less elegant and can result in harder-to-read code:

let name = (value !== null && value !== undefined) ? value : 'User';

The ?? operator provides a more concise and clear way to handle null and undefined values.