Languages
[Edit]
PL

TypeScript - ?? operator null'owego scalania

3 points
Created by:
Sylwia
3500

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

TypeScript (PL)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join