TypeScript - ?? operator null'owego scalania

W tym krótkim artykule chcielibyśmy wyjaśnić, czym jest i jak działa operator null'owego scalania - Nullish Coalescing Operator (??) w TypeScript.

?? został wprowadzony w TypeScript 3.7, aby pomóc w uzyskaniu wartości alternatywnej (możemy ją również nazwać wartością domyślną), gdy bieżącą wartością zmiennej jest null lub undefined.

// Składnia:
const outputValue = inputValue ?? defaultValue;

// Jeśli inputValue ma wartość null lub undefined, wartość outputValue ma wartość defaultValue.

Uwaga: ?? jest stosunkowo nowym rozwiązaniem w ECMAScript (mo momęcia pisania tego artykułu mamy grudzień 2020).

Praktyczny przykład:

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

const outputValue = inputValue ?? defaultValue;

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

Co jest równoważne gdybyśmy napisali:

// ONLINE-RUNNER:browser;

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

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

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

Uwaga

Nie używaj zamiennie:

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

ponieważ:

• || zwraca defaultValue zawsze kiedy operacja !!inputValue zwraca true,
• ?? zwraca defaultValue zawsze tylko kiedy operacja inputValue === null || inputValue === undefined zwraca true.

Przykładowa lista dla różnych przypadków !!inputValue została przedstawiona poniżej:

// 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

Praktyczny przykład dla opertora || :

// 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' ); // <---------------- pusta tablica tutaj
console.log( {}           || 'Default value' ); // [object Object]
console.log( function(){} || 'Default value' ); // function(){}
console.log( window       || 'Default value' ); // [object Window]

Praktyczny przykład dla operatora ?? :

//           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' ); // <---------------- pusty ciąg tutaj
console.log( 'abc'        ?? 'Default value' ); // abc
console.log( []           ?? 'Default value' ); // <---------------- pusta tablica tutaj
console.log( {}           ?? 'Default value' ); // [object Object]
console.log( function(){} ?? 'Default value' ); // function(){}
console.log( window       ?? 'Default value' ); // [object Window]

Referencje

1. Nullish Coalescing - TypeScript Docs