EN
TypeScript - ?? operator (Nullish Coalescing)
9 points
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.
xxxxxxxxxx1
// Syntax:2
const outputValue = inputValue ?? defaultValue;3
4
// If inputValue is null or undefined then outputValue has defaultValue.Note:
??is new feature of ECMAScript (now we have Dec 2020).
Practical example:
xxxxxxxxxx1
const inputValue = null;2
const defaultValue = 'Default value...';3
4
const outputValue = inputValue ?? defaultValue;5
6
console.log(outputValue); // Default value...So, it is equivalent of:
xxxxxxxxxx1
var inputValue = null;2
var defaultValue = 'Default value...';3
4
var outputValue = inputValue === null || inputValue === undefined ? defaultValue : inputValue;5
6
console.log(outputValue); // Default value...Do not use interchangeably:
xxxxxxxxxx1
const outputValue = inputValue ?? defaultValue;2
// with3
const outputValue = inputValue || defaultValue;because:
||returnsdefaultValuealways when!!inputValueoperation returnstrue,??returnsdefaultValuealways only wheninputValue === null || inputValue === undefinedoperation returnstrue.
Examp[le list of !!inputValue operation cases was presented below:
xxxxxxxxxx1
// !!inputValue2
//3
console.log( !!null ); // false4
console.log( !!undefined ); // false5
console.log( !!true ); // true6
console.log( !!false ); // false7
console.log( !!1 ); // true8
console.log( !!0 ); // false9
console.log( !!NaN ); // false10
console.log( !!-Infinity ); // true11
console.log( !!+Infinity ); // true12
console.log( !!'' ); // false13
console.log( !!'abc' ); // true14
console.log( !![] ); // true15
console.log( !!{} ); // true16
console.log( !!function(){} ); // true17
console.log( !!window ); // truePractical example for || operator:
xxxxxxxxxx1
// inputValue2
//3
console.log( null || 'Default value' ); // Default value4
console.log( undefined || 'Default value' ); // Default value5
console.log( true || 'Default value' ); // true6
console.log( false || 'Default value' ); // Default value7
console.log( 1 || 'Default value' ); // 18
console.log( 0 || 'Default value' ); // Default value9
console.log( NaN || 'Default value' ); // Default value10
console.log( -Infinity || 'Default value' ); // -Infinity11
console.log( +Infinity || 'Default value' ); // Infinity12
console.log( '' || 'Default value' ); // Default value13
console.log( 'abc' || 'Default value' ); // abc14
console.log( [] || 'Default value' ); // <---------------- empty array here15
console.log( {} || 'Default value' ); // [object Object]16
console.log( function(){} || 'Default value' ); // function(){}17
console.log( window || 'Default value' ); // [object Window]Practical example for ?? operator:
xxxxxxxxxx1
// inputValue2
//3
console.log( null ?? 'Default value' ); // Default value4
console.log( undefined ?? 'Default value' ); // Default value5
console.log( true ?? 'Default value' ); // true6
console.log( false ?? 'Default value' ); // false7
console.log( 1 ?? 'Default value' ); // 18
console.log( 0 ?? 'Default value' ); // 09
console.log( NaN ?? 'Default value' ); // NaN10
console.log( -Infinity ?? 'Default value' ); // -Infinity11
console.log( +Infinity ?? 'Default value' ); // Infinity12
console.log( '' ?? 'Default value' ); // <---------------- empty string here13
console.log( 'abc' ?? 'Default value' ); // abc14
console.log( [] ?? 'Default value' ); // <---------------- empty array here15
console.log( {} ?? 'Default value' ); // [object Object]16
console.log( function(){} ?? 'Default value' ); // function(){}17
console.log( window ?? 'Default value' ); // [object Window]