Higher Order Functions w JavaScript | Blog X-Coding
higher-order-functions-w-javascript

Higher Order Functions w JavaScript

3.10.2019 / / Developers

Dzięki funkcjom wyższego rzędu (ang. Higher Order Functions) Twój kod może być bardziej jednoznaczny a co za tym idzie krótszy, prosty i przede wszystkim – bardziej czytelny. Warto więc wiedzieć jak się nimi posługiwać.

Czym są Higher Order Functions?

Funkcje wyższego rzędu to zwyczajnie funkcje, które akceptują jako parametr lub zwracają inne funkcje. Nazywamy je tak, ponieważ nie operują na wartościach prymitywnych (number, string czy boolean) a idą o krok dalej i operują na innych funkcjach. Proste? Proste.

Przejdźmy więc do przykładów.

Jak się uczyć, to na przykładach

W poniższych przykładach funkcji wyższego rzędu będziemy używali prostej kolekcji książek, gdzie każda pozycja ma przypisany tytuł, rok wydania oraz cenę – nothing fancy here.

Higher Order Functions w JavaScript 1

Array.prototype.map

Pierwsza metoda, której się przyjrzymy map( ). Przyjmuje jako argument callback, który z kolei przyjmuje jako argument pojedynczy item z tablicy, po której będziemy iterować.

Ale najpierw po staremu:

Załóżmy, że potrzebujemy zadeklarować nową tablicę, w której będziemy przechowywać tylko tytuły naszych książek.

Higher Order Functions w JavaScript 2

Tutaj nie dzieje się nic ciekawego – deklarujemy pustą tablicę, do której następnie dopisujemy kolejne tytuły przy użyciu metody push( ) przy każdej iteracji pętli.

Teraz zróbmy to samo przy użyciu Array.prototype.map:

Higher Order Functions w JavaScript 3

Tak jak wspominałem wcześniej – metoda map( ) przyjmuje jako parametr funkcję zwrotną (callback), która z kolei przyjmuje jako parametr pojedynczy element tablicy (u nas book) a następnie zwraca tylko parametr name.

W przypadku zmiennej titles2 wykonujemy dokładnie tą samą operację ale dzięki użyciu arrow functions wraz z implicit return możemy zaoszczędzić kilka dodatkowych znaków.

Dla porównania:

  • Pętla for – 91 znaków
  • Array.prototype.map – 65 znaków
  • Array.prototype.map + arrow function – 43 znaki

Istotną informacją jest to, że metody o których mówimy (map, filter oraz reduce) nie modyfikują danych wejściowych tylko tworzą nową tablicę (w powyższym przykładzie titles oraz titles2) i w niej przechowują zmodyfikowane wartości.

Array.prototype.filter

Kolejna metoda o której powiemy to filter(). Nazwa jest dość wymowna i nie ma tu raczej potrzeby się o niej rozpisywać – przejdźmy do przykładów.

Tym razem chcemy stworzyć nową tablicę, w której przechowywać będziemy tylko książki napisane po 2015 roku.

Przy użyciu pętli for:

Higher Order Functions w JavaScript 4

i analogicznie przy użyciu Array.prototype.filter:

Higher Order Functions w JavaScript 5

Dla porównania:

  • Pętla for – 113 znaków
  • Array.prototype.map – 77 znaków
  • Array.prototype.map + arrow function – 55 znaków

Array.prototype.reduce

Ostatnia metoda to reduce( ), która pozwala nam zsumować wartości typu Number.

Załóżmy, że chcemy sprawdzić koszt wszystkich książek, które mamy w naszej kolekcji i tak przy użyciu pętli for:

Higher Order Functions w JavaScript 6

i analogicznie za pomocą metody reduce( )

Higher Order Functions w JavaScript 7

Łączenie metod z obiektu Array.prototype

Oczywiście wszystkie metody z obiektu Array.prototype możemy ze sobą łączyć tak więc jeżeli chcemy zsumować ceny wszystkich pozycji, które mają w nazwie „JS” oraz były wydane po 2015 roku, możemy to zrobić na przykład w taki sposób:

Higher Order Functions w JavaScript 8