Funkcje strzałkowe w języku Javascript

Funkcje strzałkowe – zwane również funkcjami „fat arrow”, są stosunkowo nowym sposobem pisania zwięzłych funkcji w języku JavaScript. Zostały one wprowadzone przez specyfikację ECMAScript 6 i od tego czasu stały się najpopularniejszą funkcją ES6. Funkcje strzałkowe pozwalają nam na użycie operatora fat arrow => do szybkiego definiowania funkcji JavaScript, z lub bez parametrów. Jesteśmy w stanie pominąć nawiasy klamrowe oraz słowa kluczowe function i return podczas tworzenia nowej funkcji JavaScript, aby napisać krótszą składnię funkcji. Są one nie tylko oszczędnością czasu, ale również tworzą czyste i bardziej czytelne funkcje.

W tym artykule przyjrzyjmy się kilku rzeczywistym scenariuszom tworzenia funkcji strzałek – używając ES6 w porównaniu ze starszą notacją ECMAScript 5, abyśmy mogli zobaczyć, jak te dwie składnie mają się do siebie.

Najprostsza składnia funkcji strzałek jest wtedy, gdy funkcja nie ma żadnych parametrów. W poniższym przykładzie, składnia ECMAScript 5 deklaruje wyrażenie funkcyjne i przypisuje je do zmiennej birthday. Wypisuje ona na konsolę prosty łańcuch tekstowy o treści „Happy birthday!”:

W składni funkcji strzałkowej znikają nawiasy klamrowe oraz słowa kluczowe function i return. Teraz cała funkcja zajmuje tylko jedną linię. Puste nawiasy wskazują, że funkcja nie ma żadnych parametrów, a gruba strzałka wiąże ciało funkcji z (obecnie nieistniejącymi) parametrami:

Jeden parametr

Rozszerzmy poprzedni przykład o jeden parametr, a konkretnie nazwę. Stara składnia ES5 przyjmuje jeden parametr i dołącza jego wartość do zwracanego ciągu znaków:

Składnia funkcji arrow robi w zasadzie to samo. Musimy zamknąć nazwę parametru w nawiasie przed grubą strzałką i pominąć słowo kluczowe return w bloku funkcji:

Dwa parametry

Możemy używać funkcji strzałek z dowolną liczbą parametrów. Na przykład, tutaj jest ten sam przykład z dwoma parametrami, wiekiem i nazwiskiem. Teraz, funkcja birthday() wymaga dwóch danych wejściowych, aby zwrócić ciąg znaków. Najpierw użyjmy ECMAScript 5:

A oto ten sam kod z nową notacją ES6:

Object Literals

Możemy również użyć składni funkcji strzałkowej do zadeklarowania funkcji setter, które pozwalają użytkownikom ustawić wartość literałów obiektów. Poniższa funkcja setBirthday() pozwala użytkownikom ustawić imię i wiek osoby, która ma urodziny:

Dzięki zastosowaniu notacji funkcji strzałkowej, zdefiniowanie tej samej funkcji settera zajmuje tylko jeden wiersz:

Array Manipulation

Możemy używać funkcji strzałkowych również do manipulowania tablicami w języku JavaScript. Na przykład, spójrzmy na tablicę osób, która zawiera trzy obiekty literalne, z których każdy ma imię i nazwisko oraz właściwość wieku:

Wbudowana w JavaScript metoda map() pozwala nam wywołać tę samą funkcję na każdym elemencie tablicy. Używając tradycyjnej notacji ES5, możemy zwrócić właściwość name każdej osoby w następujący sposób:

Za pomocą notacji funkcji strzałkowej możemy wykonać to samo zadanie w jednym wierszu:

When Not To Use Arrow Functions

Although arrow functions have many use cases, they come with some limitations as well. Istnieją pewne scenariusze, kiedy nie możemy lub nie powinniśmy używać składni funkcji strzałkowych.

Najważniejsze jest to, że nie możemy tworzyć konstruktorów za pomocą funkcji strzałkowych. Jeśli użyjemy nowego słowa kluczowego wraz z grubą składnią strzałki, konsola wyrzuci błąd. Dzieje się tak, ponieważ JavaScript traktuje funkcje strzałkowe w taki sam sposób jak metody obiektowe. W rezultacie nie mogą one posiadać własnych metod, co byłoby istotną cechą obiektów JavaScript. Poza tym nie możemy używać składni ES6 do deklarowania literałów obiektów i funkcji wywołania zwrotnego zawierających metody korzystające ze słowa kluczowego this, ponieważ funkcje strzałkowe traktują to w inny sposób.

Wnioski

Funkcje strzałkowe zapewniają programistom użyteczny skrót do pisania wyrażeń funkcyjnych w JavaScript. Składnia fat arrow ma wiele przypadków użycia, więc szybko stała się ulubioną funkcją ES6 w społeczności JavaScript. Jeśli jest używana konsekwentnie, nowa kompaktowa notacja może zaoszczędzić dużo czasu i przepustowości, a także poprawić czytelność kodu.

Dziękuję za przeczytanie.