TypeScript - ?? operator (Nullish Coalescing)

In this short article we would like to explain what is Nullish Coalescing Operator (??) in TypeScript, and how it works.

?? was  introduced in TypeScript 3.7 to help in getting alternative value (we can call it default value too) when current variable value is null or undefined.

// Syntax:
const outputValue = inputValue ?? defaultValue;

// If inputValue is null or undefined then outputValue has defaultValue.

Note: ?? is new feature of ECMAScript (now we have Dec 2020).

Practical example:

const inputValue = null;
const defaultValue = 'Default value...';

const outputValue = inputValue ?? defaultValue;

console.log(outputValue); // Default value...

So, it is equivalent of:

// ONLINE-RUNNER:browser;

var inputValue = null;
var defaultValue = 'Default value...';

var outputValue = inputValue === null || inputValue === undefined ? defaultValue : inputValue;

console.log(outputValue); // Default value...

Warning

Do not use interchangeably:

const outputValue = inputValue ?? defaultValue;
// with
const outputValue = inputValue || defaultValue;

because:

• || returns defaultValue always when !!inputValue operation returns true,
• ?? returns defaultValue always only when inputValue === null || inputValue === undefined operation returns true.

Examp[le list of !!inputValue operation cases was presented below:

// ONLINE-RUNNER:browser;

//           !!inputValue
//
console.log( !!null         ); // false
console.log( !!undefined    ); // false
console.log( !!true         ); // true
console.log( !!false        ); // false
console.log( !!1            ); // true
console.log( !!0            ); // false
console.log( !!NaN          ); // false
console.log( !!-Infinity    ); // true
console.log( !!+Infinity    ); // true
console.log( !!''           ); // false
console.log( !!'abc'        ); // true
console.log( !![]           ); // true
console.log( !!{}           ); // true
console.log( !!function(){} ); // true
console.log( !!window       ); // true

Practical example for || operator:

// ONLINE-RUNNER:browser;

//           inputValue
//
console.log( null         || 'Default value' ); // Default value
console.log( undefined    || 'Default value' ); // Default value
console.log( true         || 'Default value' ); // true
console.log( false        || 'Default value' ); // Default value
console.log( 1            || 'Default value' ); // 1
console.log( 0            || 'Default value' ); // Default value
console.log( NaN          || 'Default value' ); // Default value
console.log( -Infinity    || 'Default value' ); // -Infinity
console.log( +Infinity    || 'Default value' ); // Infinity
console.log( ''           || 'Default value' ); // Default value
console.log( 'abc'        || 'Default value' ); // abc
console.log( []           || 'Default value' ); // <---------------- empty array here
console.log( {}           || 'Default value' ); // [object Object]
console.log( function(){} || 'Default value' ); // function(){}
console.log( window       || 'Default value' ); // [object Window]

Practical example for ?? operator:

//           inputValue
//
console.log( null         ?? 'Default value' ); // Default value
console.log( undefined    ?? 'Default value' ); // Default value
console.log( true         ?? 'Default value' ); // true
console.log( false        ?? 'Default value' ); // false
console.log( 1            ?? 'Default value' ); // 1
console.log( 0            ?? 'Default value' ); // 0
console.log( NaN          ?? 'Default value' ); // NaN
console.log( -Infinity    ?? 'Default value' ); // -Infinity
console.log( +Infinity    ?? 'Default value' ); // Infinity
console.log( ''           ?? 'Default value' ); // <---------------- empty string here
console.log( 'abc'        ?? 'Default value' ); // abc
console.log( []           ?? 'Default value' ); // <---------------- empty array here
console.log( {}           ?? 'Default value' ); // [object Object]
console.log( function(){} ?? 'Default value' ); // function(){}
console.log( window       ?? 'Default value' ); // [object Window]

References

1. Nullish Coalescing - TypeScript Docs