Introduction

Javascript has become increasingly popular for creating interactive web applications in recent years. Several new features have also been added. One of them is the Nullish Coalescing operator, which was added to the 2020 version of ECMA Script or ES11. This blog post digs deeper into this newly introduced operator and its operation.

Nullish Coalescing (??) operator

The nullish coalescing operator is a logical operator which is represented as ??. This is introduced to handle nullish values such as 'null' or 'undefined'.

Syntax :

valueOfVariable ?? defaultValue

How does it work?

When the left-hand operand is null or undefined, the nullish coalescing operator returns its right-hand operand; otherwise, it returns its left-hand operand. In other words, if the left-hand operand is null or undefined, the operator evaluates and returns the right-hand operand; otherwise, it returns the left-hand operand.

Let's make it clear with the following examples:

const value1 = null;
const value2 = undefined;
const value3=5;

console.log(value1 ?? 'default value'); // 'default value'
console.log(value2 ?? 'default value'); // 'default value'
console.log(value3 ?? 'default value'); // 5

In the example above, we have three variables: value1, value2 and value3. value1 is null, value2 is undefined and value3 is 5. When evaluating these variables with the nullish coalescing operator, we observe that the operator returns the right-hand operand when the left-hand operand is null or undefined and the left-hand operand in all other situations.

But hold on, did you know how developers handled these null and undefined values even before the nullish coalescing operator? The logical OR (||) operator is used to provide the solution. Let's learn more about these operators and discover why a nullish coalescing operator is necessary.

Logical OR (||) vs nullish coalescing (??)

If the left operand of the logical OR (||) operator has a false value, the right operand is returned; otherwise, the left operand is returned. The following values in JavaScript are considered false values, including

• 0

• ' ' (empty string)

• null

• undefined

• false

• NaN (Not a Number)

Follows the example to understand

const value1 = null;
const value2 = undefined;
const value3 = 0;
const value4 = '';
const value5 = false;
const value6 = NaN;

console.log(value1 || 'default value'); //default value
console.log(value2 || 'default value'); //default value
console.log(value3 || 'default value'); //default value
console.log(value4 || 'default value'); //default value
console.log(value5 || 'default value'); //default value
console.log(value6 || 'default value'); //default value

Even though they are not null or undefined in the above example, all six variables evaluate to the "default value". In some cases, it returns unexpected values.

But in the case of nullish coalescing the falsy values are treated as defined values and it returns the left-hand operand, unlike the OR operator which returns the right-hand operand.

Let's consider the same example using ?? operator

const value1 = null;
const value2 = undefined;
const value3 = 0;
const value4 = '';
const value5 = false;
const value6=NaN;

console.log(value1 ?? 'default value'); //default value
console.log(value2 ?? 'default value'); // default value
console.log(value3 ?? 'default value'); // 0
console.log(value4 ?? 'default value'); // 
console.log(value5 ?? 'default value'); //false
console.log(value6 ?? 'default value'); //NaN

In the above example only null and undefined is treated as the nullish value and the default value is returned and the others are treated as a defined value.

Conclusion

In conclusion, the Nullish Coalescing Operator is a useful addition to JavaScript for dealing with null values. It provides a concise and readable method for dealing with default values and other scenarios in which null values may result in unexpected behavior.