W końcu do zwykłego JavaScriptu w ES2020 zostanie dodana bardzo przydatna funkcjonalność – optional chaining. Wcześniej była dostępna w TypeScripcie, jednak wraz z nową wersją standardu EcmaScript będzie dostepna również dla aplikacji nieużywających TSa. Czym jest optional chaining i o co w nim chodzi? Zapraszam do lektury!

Zacznijmy od przykładu. Mamy obiekt:

const czlowiek = {
  dane: {
    imie: 'Dawid',
  },
}

Kiedy wypisujemy dane, które są dostępne, jest ok – wypisuje nam poprawnie:

console.log(czlowiek.dane.imie); // Dawid

Co jednak, gdy wypiszemy dane, ktorych nie ma? Jeżeli jest to w istniejącym obiekcie, otrzymamy undefined:

console.log(czlowiek.dane.nazwisko); // undefined

Jednak nie zawsze wiemy, czy dany obiekt istnieje. Co, jeżeli dane przyszły niekompletne, a my chcemy wypisać coś, czego nie ma?

console.log(czlowiek.wymiary.wzrost); // "TypeError: Cannot read property 'wzrost' of undefined

Czyli co, mamy sprawdzać każdy poziom obiektu, zanim go użyjemy? Coś w stylu:

if( człowiek && człowiek.wymiary && człowiek.wymiary.wzrost ) {
  …
}

A co, jeżeli obiekt ma 5 poziomów zagnieżdżenia dla np. sześciu ścieżek, a my chcemy te właśnie dane uzyskać? Powinniśmy zrobić sześć długich warunków? Kiedyś – tak. Ale nie w ES2020.

Optional chaining pozwala nam na skrócony zapis sprawdzenia, czy istnieje dany obiekt.

if( człowiek && człowiek.wymiary && człowiek.wymiary.wzrost ) {
  …
}

Można zapisać jako:

czlowiek?.wymiary?.wzrost

Znaki zapytania po wartości a przed kropką sa własnie sprawdzeniem, czy dany element istnieje. Jeżeli człowiek, wymiary oraz wzrost są dostępne, zwróci ci wartość elementu wzrost. Jeżeli dowolny z elementów obiektu nie istnieje, zamiast błędu otrzymasz undefined. Prosto, szybko i przyjemnie. Prawda, że proste? 

Optional chaining działa też w przypadku wywołania funkcji czy wybrania określonego elementu z tablicy:

const czlowiek = {
  powiedz: (tekst) => {
    console.log(tekst);
  }
}

czlowiek?.powiedz?.(‘Cos do powiedzenia’); // Jeżeli funckja istnieje - jest wywolywana

czlowiek?.tablica?.[0]

Podsumowanie

Jak widzisz, optional chaining bardzo skraca kod, a co za tym idzie szybciej się go pisze, oraz jest czytelniejszy. Uważam, że naprawdę warto zacząć go stosować jak najszybciej. Na początku może sprawić parę problemów, ale uwierz mi – warto!

Jeżeli masz jakieś pytania odnośnie optional chainingu lub JSa – zapraszam do komentarzy!