Operatory: Nullish Coalescing & Optional Chaining

Przeglądając listę nowości, które mają zostać wprowadzone do JS, można tam znaleźć 2 ciekawe operatory – Nullish/Nullary Coalescing Operator oraz Optional Chaining Operator.

Obie propozycje są dopiero na Stage 1. Oznacza to, że jest mało prawdopodobne, aby znalazły się one w ostatecznej ES 2018. Mimo to warto się z nimi zapoznać, ponieważ dzięki babelowym pluginom (OCO, NCO) możecie z nich skorzystać już teraz.

Optional Chaining Operator ?.

Wiesz pewnie, jak działa operator logiczny AND: expr1 && expr2 – zwróć expr1, jeśli jest konwertowany do false; w innym wypadku, zwróć expr2.

Ten operator często wykorzystujemy do sprawdzenia istnienia własności obiektu. Jednak… spójrzmy na przykład. Sposób, w jaki obecnie rozwiązuje się przedstawiony problem, nie jest najbardziej miły dla oka.

//group, kid, favouriteToy mogą być null albo undefined.... wtedy wyskoczy nam error
const favouriteToy = kindergarden.group.kid.favouriteToy;

//wpółczesne rozwiązanie problemu istnienia własności obiektu 
const favouriteToy = kindergarden
  && kindergarden.group
  && kindergarden.group.kid
  && kindergarden.group.kid.favouriteToy;

//rozwiązane problemu za pomocą Optional Chaining Operator
const favouriteToy = kindergarden.group?.kid?.favouriteToy;

Składnia OCO umożliwia sprytne, przejrzyste sprawdzenie istnienia danych własności. Jak to dokładnie działa?

obj?.prop – jeśli obj jest równe null lub undefined – całe wyrażenie jest konwertowane do undefined; szukaj prop dla pozostałych wartości obj

Ta konstrukcja umożliwia również czytelne zdefiniowanie wartości domyślnej:

//bleh
const favouriteToy = (kindergarden
  && kindergarden.group
  && kindergarden.group.kid
  && kindergarden.group.kid.favouriteToy) || 'butla z mlekiem';

//nice
const favouriteToy = kindergarden.group?.kid?.favouriteToy || 'butla z mlekiem';

OCO może być również wykorzystywane do sprawdzenia istnienia funkcji lub tablicy. Poniżej wypisałam inne, przykładowe możliwości składni tego operatora.

obj?.[expr]                        
obj == null ? undefined : obj[expr]
// undefined if `obj` is null/undefined, `obj[expr]` otherwise.

func?.(...arg)                        
func == null ? undefined : func(...args)
// undefined if `func` is null/undefined
// throws a TypeError if `func` is neither null/undefined, nor a function
// invokes the function `func` otherwise

Nullish/Nullary Coalescing Operator ??

Ten operator to po prostu lepsza wersja operatora logicznego OR czyli ||.

Wiesz na pewno, jak działa expr1 || expr2 – zwróć expr1, jeśli jest konwertowany do true; w innym wypadku, zwróć expr2. Proste działanie, jednak spójrzmy na te przykłady:

const child = {
  description: {
    dietRestrictions: '',
    numberOfTeeth: 0,
    canWalk: false,
    nullValue: null
  }
};

const undefinedValue = child.description?.undefinedValue || 'domyślna odpowiedź - brak danych'; 
// 'domyślna odpowiedź - brak danych' - super, tak miało być!

const nullValue = child.description?.nullValue || 'domyślna odpowiedź - brak danych'; 
// 'domyślna odpowiedź - brak danych' - super, tak miało być!

//wszystko, co dobre, się kończy...

const dietRestrictions = child.description?.dietRestrictions || 'Brak  danych'; 
// Ajć! '' konwertuje się do false i w rezultacie widzimy 'Brak danych' mimo, iż dane są - mówią o braku ograniczeń żywieniowych

const numberOfTeeth = child.description?.numberOfTeeth || 'Brak danych'; 
// Ajć! 0 konwertuje się do false i w rezultacie widzimy 'Brak danych' mimo, iż dane są - mówią o braku zębów

const canWalk = child.description?.canWalk || 'Brak danych'; 
// Ajć! false konwertuje się do false i w rezultacie widzimy 'Brak danych' mimo, iż dane są - mówią o braku umiejętności chodzenia

Teraz na pewno widzicie, na czym polega problem z ORem. Nullish Coalescing Operator eliminuję wadę tej konstrukcji.

expr1 ?? expr2 – zwróć expr1, jeśli jest równe null lub undefined; w innym wypadku, zwróć expr2.

const child = { 
  description: { 
    dietRestrictions: '', 
    numberOfTeeth: 0, 
    canWalk: false, 
    nullValue: null 
  } 
};

const undefinedValue = child.description?.undefinedValue ?? 'domyślna odpowiedź - brak danych'; 
// 'domyślna odpowiedź - brak danych'

const nullValue = child.description?.nullValue ?? 'domyślna odpowiedź - brak danych'; 
// 'domyślna odpowiedź - brak danych'

const dietRestrictions = child.description?.dietRestrictions ?? 'Brak danych'; 
// ''

const animationDuration = child.description?.animationDuration ?? 'Brak danych'; 
// 0

const showSplashScreen = child.description?.showSplashScreen ?? 'Brak danych'; 
// false

Yeah!

A na koniec mam dla ciebie zadanie – podaj swoje polskie tłumaczenie operatorów Optional Chaining Operator oraz Nullish/Nullary Coalescing Operator! Kto wie, może wpiszesz się w karty historii JSa i ktoś rozpropaguje właśnie twój pomysł!

Źródła i więcej info: KLIK!, KLIK!, KLIK!, KLIK!

P.S. Przepraszam, za te przykłady. Jakoś w moich warunkach pracy ciężko myśleć o czymś innym! Backstage bloga znajdziecie na facebooku – klik!