Funkcje grubo-strzałkowe czyli fat arrow functions w JavaScript

Mamy rok 2017 i okazuje się, że wiele rozwiązań z ES6, którymi jeszcze niedawno uznawałem za nowości, weszły do codziennego użycia. Blokowy zakres zmiennych, stałe, domyślne parametry, łatwe manipulowanie literałami łańcuchów znaków i wiele innych ficzerów, widzę cały czas w pisanym przez siebie kodzie.

Już nie tylko środowisko node, bez problemu interpretuje najnowsze standardy. Co raz lepsze wsparcie dla ES6 posiadają także przeglądarki. Tam gdzie tego wsparcia nie ma, można skorzystać z wielu narzędzi, które pozwalają obejść tę niedogodność. Suma sumarum, standard ES6 trzeba znać i stosować, bez wymówek. Właśnie dlatego dzisiejszy post poświęcę jednemu z ficzerów es6, fat arrow function, czyli funkcjom o puszystych strzałkach 🙂

javascript arrow functions

O fat arrow functions wspominałem już pobieżnie przy okazji pisania o funkcjach w TypeScripcie. Dziś postaram się podejść do tematu trochę bardziej ogólnie, ponieważ składnie tą widzi się często poza językami transpilowanymi.

Czym są fat arrow functions? Ciężko wytłumaczyć, lepiej pokazać 🙂 Można powiedzieć, że jest to alternatywny zapis dla funkcji anonimowych. W odróżnieniu do standardowego zapisu, jest jednak dużo bardziej kompaktowy. Oto prosty przykład, który można uruchomić w środowisku node.js:

Jak widać, wbrew temu co sugeruje nazwa, nowy zapis jest, w porównaniu ze starym, raczej dość uszczuplony 🙂 . Składa się on jedynie z nazwy parametru, strzałki ( => ) oraz z wartości zwracanej. Pominięte zostały nawiasy oraz słowa function i return.

Jest to oczywiście najprostszy przykład, nic nie stoi na przeszkodzie aby zmanipulować zwracaną wartość:

Do funkcji strzałkowej, tak samo jak do zwykłej, można też dodać więcej parametrów. Należy wtedy objąć je okrągłymi nawiasami:

Wszystkie zasady, które stosuje się do zapisywania parametrów w zwykłej funkcji należy przestrzegać i tu. Nic nie stoi na przeszkodzie aby w ogóle nie przekazywać parametrów do funkcji, wtedy wystarczy wpisać same nawiasy:

Jeżeli chcemy aby nasza funkcja robiła coś więcej niż tylko proste zwracanie wartości, musimy ciało funkcji otoczyć nawiasami klamrowymi. Oto dwa przykłady:

W pierwszym przypadku nic nie zwracam a tylko loguję wartość do konsoli. Ponieważ nie ma tu returna, wolę otoczyć kod nawiasem klamrowym, chociaż to akurat nie wywołałoby błędu. Druga funkcja loguje wartość ale też coś zwraca.

W drugim przykładzie, nawiasy klamrowe są już niezbędne. Inaczej interpreter nie będzie wiedział, że linijka z returnem należy do funkcji. Oczywiście nie można w takim wypadku pominąć też samego return, jak robiłem to w poprzednich przykładach.

Ten zapis funkcji może na początku wydawać się dziwny i nienaturalny, ale uwierzcie mi, bardzo szybko można się do niego przyzwyczaić. Ja niemal błyskawicznie nauczyłem się doceniać kompaktowość tego rozwiązania i dla mnie, podstawowy zapis wygląda teraz dziwnie 🙂 , szczególnie jeżeli używany jest w callbacku.

I tu przechodzimy do drugiej, po kompaktowości, zalety zapisu arrow function. Stosowanie jej nie zmienia kontekstu this. Zanim pokaże to na przykładzie, zaprezentuje proste użycie arrow function w callbacku:

Oba fragmenty kodu spowodują oczywiście, że co dwie sekundy w konsoli pojawi się wiadomość. Jak widać nie wiele tu zyskujemy jeżeli chodzi o długość zapisu. Właściwie to w arrow function brakuje tylko słowa function oraz „strzałki”.

Ale co się stanie, jeżeli wewnątrz setInterval będę chciał odwołać się do zewnętrznego scope, w pierwotnym zapisie wyglądałoby to tak:

Chciałbym aby wartość pola speed obiektu Dog zwiększała się co sekundę. Każdy wie, że nie mogę tego zrobić poprostu odwołując się do this. Timer ma swój własny scope, więc muszę użyć znanego ‚haxa’ czyli zapisać referencje do zakresu w zmiennej self. I tak to robiliśmy przez długi czas. Aż do teraz.

Oto ten sam przykład ale z wykorzystaniem arrow function:

I działa idealnie! Zapis arrow function, pozwala zachować zakres obiektu, tak jak powinno to być zawsze 🙂 .

Mam nadzieję, że za pomocą tych prostych przykładów udało mi się przedstawić zapis i działanie arrow function. Spróbuj uruchomić te przykłady u siebie, coś w nich pozmieniać i zobaczyć co się stanie. Zachęcam do poświęcenia kilku chwil na to aby zrozumieć do zagadnienie oraz następnie do stosowania go na co dzień we własnym kodzie.

To wszystko na dziś. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem 🙂 .

3 thoughts on “Funkcje grubo-strzałkowe czyli fat arrow functions w JavaScript”

  1. Piszesz że timer ma własny scope, lecz jak napiszę :
    function Dog(){
    this.speed = 10;
    setInterval(function(){
    console.log(this.speed++);
    },1000)
    }
    To jak najbardziej działa i wcale nie muszę zapisać this do zmiennej. Mógłbyś mi to wytłumaczyć?

    1. Jeśli wykonasz tą funkcję jako Dog() to wówczas nie zmieniasz kontekstu i speed jest przypisana do obiektu globalnego window. Poza tym dzieje się to tak, że Dog() jest własnie wywoływana w globalnym zakresie. Przy użyciu operatora new zmienisz kontekst this stąd this trzeba przypisać do zmiennej.

      Oczywiście mam na myśli środowisko przeglądarki, chociaż po stronie serwerowej jest analogicznie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *