More

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi pytaniami, które pojawiały się niemalże na każdym spotkaniu. Mnie jedno z takich pytań zainspirowało do napisania poniższego postu. Dzielę się w nim swoją wiedzą i przemyśleniami na temat programowania funkcyjnego w JS.

    Zasady programowania funkcyjnego

    Samo programowanie funkcyjne jest tematem popularnym i bardzo często używanym podczas projektowania aplikacji internetowych. Jest to paradygmat programowania, zbiór pewnych założeń, których powinniśmy się trzymać podczas tworzenia aplikacji. Te zasady to:

    • używanie Pure Functions,
    • unikanie współdzielenia stanu,
    • unikanie mutowania danych,
    • unikanie side-efects.

    Powyższe założenia, które za chwilę omówię dokładniej, mają za zadanie pomóc nam tworzyć aplikacje mniej zawodne, łatwiejsze do testowania oraz diagnozowania bugów. 

    Pure Functions 

    Podczas tworzenia aplikacji zgodnej z zasadami programowania funkcyjnego, nasze funkcje powinny być czyste. Oznacza to, że wynik takiej funkcji jest zależny jedynie od argumentów. Innym słowy pure function, dla określonych argumentów, zwraca zawsze ten sam wynik. 

    Takie podejście znacząco ułatwi testowanie funkcji, ponieważ nie musimy mockować żadnych danych globalnych. Wystarczy, że wywołamy funkcję z danymi argumentami, a zobaczymy czy otrzymaliśmy oczekiwany wynik.

    Dodatkowo możemy sporo zyskać na optymalizacji. Funkcje czyste mogą zostać memoizowane, czyli wynik ich działania dla określonych argumentów może zostać zapisany w cache i przy ponownym wywołaniu z tymi samymi argumentami, funkcja się nie wykona, a jedynie zostanie zwrócony wynik z cache.

    Ważne jest również to, że funkcje czyste nie mogą także powodować side effectów.

    Unikanie współdzielenia stanu

    Druga zasada odnosi się do współdzielenia danych, na których operuje nasz kod. Jeśli działanie naszej funkcjonalności zależy od jakiegoś globalnego obiektu, może to powodować trudne do wykrycia błędy.

    Wyobraźmy sobie sytuację, gdzie całkowicie oddzielny obszar naszej aplikacji modyfikuje nasz stan, co wpływa na działanie naszej funkcjonalności. Dodatkowo, chcąc przetestować nasz obszar, musimy zamockować globalny obiekt, z którego korzystamy. 

    Unikanie mutowania danych

    To kolejna zasada, która pozwoli nam uniknąć wielu problemów. Pisząc kod, powinniśmy unikać modyfikacji już istniejących danych. W JavaScript nawet jeśli obiekty lub tablice zadeklarujemy jako stałe, możemy wciąż je zmieniać. Jeśli zatem jakiejś funkcji przekazujemy obiekt, to robimy to przez referencję. Oznacza to, że modyfikując obiekt, funkcja powoduje jego zmianę wszędzie tam, gdzie jest używany. Tego typu błędy są bardzo ciężkie do wykrycia. Nasze funkcje powinny więc przyjmować argumenty, na których będą pracować, tworzyć ich kopie, a następnie zwracać nowy obiekt. W ten sposób jesteśmy w stanie wygodnie śledzić cały proces operacji na danych w naszej aplikacji i uniknąć niechcianych zmian.

    Unikanie side-effects

    Ta zasada mówi, że powinniśmy unikać efektów ubocznych działania naszych funkcji. Takimi efektami są m.in. modyfikowanie globalnego stanu, wywoływanie innych funkcji lub uruchamianie innych procesów. Co to oznacza?

    Po pierwsze, nasza funkcja staje się bardziej skomplikowana, gdyż nie jest już odpowiedzialna jedynie za wykonanie jednego zadania i zwrócenie wyniku, ale musi także robić coś, co możemy przeoczyć lub może to spowodować niemożliwość ponownego użycia tej funkcji.

    Po drugie, taka funkcja nie może być memoizowana, gdyż za każdym razem musi się wykonać. 

    Dobre praktyki

    JavaScript nie jest językiem typowo funkcyjnym. Daje nam możliwość implementacji różnych paradygmatów programowania. Bardzo popularne jednak stało się trzymanie zasad programowania funkcyjnego. Co prawda, raczej rzadkością są aplikacje, które w 100% byłyby napisane w ten sposób. Staramy się jednak wydzielić jak najwięcej obszarów, które te zasady spełnią. Takie miejsca są łatwiejsze w testowaniu oraz debugowaniu. 

    Jeśli tworzymy aplikację w React, to dobrze wiemy, że bardzo popularne rozwiązania jak np. redux, redux-saga nie są zgodne z zasadami programowania funkcyjnego, a nasze główne komponenty zależą od stanu globalnego. Co za tym idzie, często wywołują side-effects. Powinniśmy zatem pilnować, aby małe komponenty prezentacyjne jak np. buttony, listy, formularze były funkcjami czystymi. 

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X