Przydatne operatory javascript cz. 2

Operator nullowego scalania, opcjonalnego dostępu, czy nullowego przypisania. Operatory te są przykładami nowych konstruckji składniowych w javascript. Sprawdźmy czym się charakteryzują nowe operatory i w jakich sytuacjach mogą być przydatne.

Wprowadzenie

Zgodnie z zapowiedzią, kontynuuję dziś temat operatorów javascript. Tym razem skupimy się na znacznie nowszych i nowocześniejszych operatorach, które przyszły wraz z nowymi wersjami ECMAScript. Są one przeważnie ułatwieniem w pisaniu kodu, ale przez wielu programistów nie są nawet stosowane. Dlaczego? Bo nie mają oni świadmości, że takowe istnieją. Sam jeszcze kilka miesięcy temu stosując co najwyżej ternary operator nie wiedziałem, że mogę użyć coś takiego jak operator nullowego scalania czy opcjonalnego dostępu, przyśpieszając tym swoją pracę diametralnie.

Operator opcjonalnego dostępu / optional chaining operator [?.]

Wytłumaczmy sobie ten case na przykładzie w kodzie. Zadeklarujmy sobie jakiś obiekt:

const bestMovieEver = {
  title: 'The Shawshank Redemption',
  year: 1994,
  director: 'Frank Darabont',
  duration: {
    minutes: 144,
    hours: 2.4,
  },
};

Niech to będzie obiekt reprezentujący film, gdzie mamy podstawowe dane na jego temat. Normalnie odczytując któryś z kluczy tego obiektu zrobimy to w następujący sposób:

console.log(bestMovieEver.title);   // The Shawshank Redemption

Co jednak jeśli żądany klucz nie będzie istniał? W takim wypadku parser może rzucić wyjątkiem, co może skutkować wywaleniem się runtimu. Jest to jednym słowem "errorogenne". Dzięki operatorowi opcjonalnego dostępu (optional chaining), możemy zapobiec temu błędu, co w rezultacie zwróci nam wartość nullish, jednak będzie to dopuszczalne przez runtime.

const movieScriptioner = bestMovieEver.scriptioner; // może wyrzucić błąd
const movieScriptioner = bestMovieEver?.scriptioner; // zapobieżenie błędu

Takie podejście pozwala na odczytanie referencji w łańcuchu obiektowym bez walidowania tej referencji - czy w ogóle ona istnieje. Wyobraź sobie sprawdzanie za każdym razem czy dany element istnieje przed jego przypisaniem. W React często występuje taka sytuacja, w której niestety zwracana referencja klucza obiektu zwraca null bądź undefined i runtime się wtedy wywala. Na pierwszą myśl przychodzi mi przypisywanie danych pochodzących z fetcha i czekanie aż asynchroniczny skrypt się wykona.

<User name={userData?.name} />   
// Mimo, że zwracana wartość może być nuulish, 
// to React się nie wywali i poczeka na wartość prawdziwą lub wyślę propsem userData wartość null 

Optional chainging możemy stosować w wielu poziomach obiektu, tak głęboko jak tylko chcemy:

const timeInSeconds = bestMovieEver?.duration?.seconds;

Operator ?. jesto odpowiednikiem następującej konstrukcji:

const nestedProp = bestMovieEver.duration?.hours;  // optional chaining operator

const temp = bestMovieEver.duration;
const nestedProp = temp === null || temp === undefined ? undefined : temp.hours;
// ręczne sprawdzanie za pomocą ternaty operator

console.log(nestedProp1); // 2.4

Optional chainging jest więc dobrym przykładem syntacitc sugar w javscript.

Operator nullowego scalania / Nullish Coalescing Operator [??]

Ten operator pozwala na przypisanie pewnej domyślnej wartości, jeśli tylko sprawdzana wartość jest nullish. Rzućmy okiem:

const dummy = undefined;

const value = dummy ?? true;
console.log(value)  // true

W momencie kiedy zmienna dummy otrzyma wartość null lub undefined, to dzięki operatorowi ?? przypisana zostanie wartość podana po nim - czyli wartość domyślna. W przeciwnym wypadku domyślna wartość nie zostanie w ogóle wykorzystana, a do zmiennej zostanie przypisana wartość zmiennej dummy (czyli musi być ona prawdziwa). I ponownie, stanowi tą syntactic sugar i przyśpiesza programistom pracę. Sczęgólnie przydatne jest to w definiowaniu nowych obiektów, gdzie chcemy przypisać konrketną domyślną wartość zamiast zwykłego undefined. Ten operator szczególną właściwość ma z wykorzystaniem poprzedniego operatora:

const movieDirector = bestMovieEver?.director ?? 'no director defined';
console.log(movieDirector);  // no director defined

Operatory &&=, ||= oraz ??=

Są to bardzo świeże operatory ze specyfikacji ECMAScript 2021 i zapewniają chyba najlepsze już uproszczenie składniowe jeśli chodzi o walidowanie zmiennych i warunkowe przypisywanie do nich wartości. Operują tylko na dwóch referencjach i służą jedynie do przypisywania wartości. Rozpiszemy je sobie w punktach.

Operator logicznego przypisania AND &&=:

  • sprawdza czy obie zmienne są prawdziwe i na tej podstawie przypisuje wartość
  • przypisuje prawą wartość jeśli warunek jest spełniony
  • jeśli warunek nie jest spełniony, to przypisuje pierwszą fałszywą wartość
let a = true;
a &&= null;
console.log(a); // null

//___________________

let b = true;
b &&= 1;
console.log(b); // 1

//___________________

let c = false;
c &&= null;
console.log(c); // false

//___________________

let d = null;
d &&= false;
console.log(d); // null

Operator logicznego przypisania OR ||=:

  • sprawdza czy przynajmniej jedna referencja jest prawdziwa
  • jeśli spełnia warunek, przypisuje wartość od lewej strony - pierwszą prawdziwą
  • jeśli warunek nie jest spełniony, to przypisuje prawą wartość fałszywą
let a = true;
a ||= null;
console.log(a); // true

//___________________

let b = true;
b ||= 1;
console.log(b); // true

//___________________

let c = false;
c ||= 1;
console.log(c); // 1

//___________________

let d = null;
d ||= false;
console.log(d); // false

Operator nullowego przypisania ??=:

  • sprawdza czy wartość jest wartością typu nuulish i na tej podstawie przypisuje wartość
  • przypisuje wartość prawą - jeśli warunek jest spełniony
  • jeśli warunek nie jest spełniony, to przypisuje prawą wartość lewą
let a = undefined;
a ??= true;
console.log(a); // true

//___________________

let b = false;
b ??= 1;
console.log(b); // true

//___________________

let c = null;
c ??= false;
console.log(c); // 1

Zakończenie

To tyle jeżeli chodzi o operatory. Mam nadzieję, że zrozumiałeś/aś jak działają i jak pomagają w codziennej pracy frontendowca. Starałem się wybrać te najciekawsze, z perspektywy mojej osoby. Oczywiście w js operatorów w ogóle jest od groma (np. operatory działające na bitach), których tutaj nie poruszam, bo są to raczej akademickie przykłady, niż praktyczne i codzienne. Jeżeli mimo wszystko interesuje cię ten temat, to nalegam do samodzielnej zabawy z kodem i czytanie dokumentacji, żeby jak najbardziej utrwalić sobie te wszystkie informację i wykorzystywać je na co dzień. Link w źródłach. Stay tuned!

Źródła

© Damian Kalka 2021
Wszelkie prawa zastrzeżone