Nullish Coalescing Operator in JavaScript

To execute the code conditionally in JavaScript, logical operators come handy. To write more readable and modular code, many developers behave the short-circuit way. As logical operators are evaluated from left to right, in short-circuiting the first expression is enough to determine the outcome of operator. Before ES2020, JavaScript had two short-circuiting operators: || and &&.

ES2020 introduced the Nullish Coalescing Operator which is a logical expression that is used to get the first defined value of the two expressions sitting besides the ??. Many times in programming we just want to check whether the left operand is null or undefined. The Nullish Coalescing operator becomes go-to unlike the current operators. The syntax for this operator is

leftExpression ?? rightExpression

It returns

leftExpression if the leftExpression is not undefined or null
rightExpression if the leftExpression is undefined or null

the values which are null or undefined are called nullish values in JavaScript.

Let's compare to what we have been writing till now. Compare x ?? ywith: (x !== null && y !== undefined) ? x : y; The following code returns red because color is undefined.

const color;
console.log( color ?? "Red" );

Why Nullish operator?

The already existing operators works fine but sometimes we may need only the next expression to be evaluated depending on whether the first operand being null or undefined. It is also used to assign default values.

Consider the following example:

It returns red as color is not undefined or null

const color = "red";
console.log( color ?? "blue")

?? can also be used in a sequence to select the first defined value from the list, or display someValue. The following code will return a.

let alphabetA = "a";
let alphabetNull = null;
let alphabetUndefined;

console.log( alphabetA ?? alphabetNull ?? alphabetUndefined ?? "someValue");

To assign a default value, if color is null or undefined

color = color ?? "purple";

Examples

let color = null ?? "blue"; 
console.log(color); // (blue)

color = false ?? true;
console.log(color); // (false because false is not undefined or null)

color = null ?? undefined;
console.log(color); // (undefined)

`||` or `??`

The main difference between both the operators is:

|| returns the first truthy value
?? returns the first defined value

What falsy values are considered in JavaScript?

false
0
undefined
null
" " (empty string)
NaN

All the values other than these are considered truthy. So, when using || operator, if any of the above values is the left argument, then it will return the right argument always. Whereas, ?? operator will return the right-hand argument only when the left-hand argument is undefined or null.

Precedence

One important thing to remember is, ?? operator has lower precedence than && and ||, so when used with them, consider adding explicit parenthesis else it would result in syntaxError. Consider the following example. It will give syntaxError.

let color = "red" && "blue" ?? "green";

Now, consider the following which returns blue.

let color = ("red" && "blue") ?? "green";
console.log(color);

Before you go, let's summarize

The nullish coalescing operator ??

returns the right-hand side argument when the left-hand side one is undefined or null.
is used to set defaults to variable which are either undefined or null.
returns the first defined value from the list/two given arguments around ??.

If you enjoyed reading, please consider sharing so that other people could benefit from it.