Nullish Coalescing (??): Modern JS

Nullish coalescing is a new logical operator (??) for the JavaScript programming language. It was released on April 2nd 2020, as part of ECMAScript version 2020 (ES11).

Lets understand why do we need this and why it is so useful.

OR (||) Operator

In JavaScript, there is logical OR (||) operator, that always return first truthy value. In JavaScript there are total six values that are considered as falsy.

• false
• undefined
• null
• “”
• Nan
• 0

Note that those falsy value are non-Boolean value which are implicitly converted to false. And similarly for truthy value.

Consider this example 1:

const val1 = 20;
const val2 = 23;

const result = val1|| val2; 

console.log(result); // 20

As we understood that || operator returns the first truthy value, in above code val1 contains truthy value, so in result it will save val1 value.

Example 2:

const val1 = 0;
const val2 = 23;

const result = val1 || val2 

console.log(result); // 23

In above code as val1 contains falsy value, so in result, val2 value will be saved.

Why we need Nullish Coalescing in JS if we already have OR operator?

Sometimes we want the next expression to be evaluated when our first operand is null or undefined.

Consider a use case where you don’t want a user’s username to be null or undefined. In such places Nullish coalescing is used.

Example 1:

In expression result= x ?? y,

• If x is null or undefined, result will be y
• If x is not null or undefined, result will be x

let result = undefined ?? "Hello";
console.log(result); // Hello

result = null ?? true; 
console.log(result); // true

result = false ?? true;
console.log(result); // false

result = 55 ?? true; 
console.log(result); // 55

From above code, it’s clear how Nullish coalescing works.

The Nullish coalescing operator isn’t anything completely new. It’s just a nice syntax to get the first “defined” value.

We can rewrite result= x ?? y using the operators that we already know, like this:

result = (x !== null && x!== undefined) ? x: y;

Nullish coalescing is making our work easy by avoiding the work to write such big expression.

Chaining with the AND or OR operator

We can chain Nullish coalescing with AND or OR

const result = (null || undefined) ?? 'Hello'; 
console.log(result); // 'Hello'

Note that we can syntax error, if we chain it , in this manner.

const result = null || undefined ?? 'Hello'; // syntax error

So we need to wrap the left handside expression with parenthesis.

Logical Nullish assignment (??=)

Consider example

x ??= y

In above example, x is assigned the value of y only if x is null or undefined.

const result= { marks: null ,name:"Hello"};
result.marks??= 100;
console.log(result.marks); //100
result.name ??= "World";
console.log(result.name);// Hello
result.subject ??= "JavaScript"
console.log(result.subject);// JavaScript

From above examples, we can clearly understand how logical Nullish assignment works.

If you like this post and find it helpful you can give me claps 😍!!