Funkcje wyższego rzędu w JavaScript: map, filter, reduce i callbacki

Funkcje są wartościami

W JavaScript funkcja jest wartością jak każda inna. Możesz zapisać ją w zmiennej, włożyć do tablicy, przekazać innej funkcji albo z niej zwrócić. Już sam ten fakt otwiera cały styl programowania:

const square = (n) => n * n;
const operations = [square, (n) => n + 1];

console.log(square);          // the function itself
console.log(operations[0](5)); // call it out of the array

Gdy oswoisz się z traktowaniem funkcji jak wartości, funkcje wyższego rzędu przestają być tajemnicze. Funkcja wyższego rzędu to po prostu funkcja, która przyjmuje funkcję jako argument, zwraca funkcję albo robi obie te rzeczy. To cała definicja.

Funkcja jako argument

Najczęstsza forma: funkcja, która przyjmuje callback i wywołuje go za ciebie. Na pewno już takich używasz, nawet o tym nie myśląc.

[1, 2, 3].forEach((n) => console.log(n * 10));

setTimeout(() => console.log("później"), 100);

forEach jest funkcją wyższego rzędu: bierze twoją funkcję i wywołuje ją raz dla każdego elementu. setTimeout też: bierze twoją funkcję i wywołuje ją po opóźnieniu. Ty skupiasz się na tym, co zrobić, a one zajmują się tym, kiedy i ile razy.

Własną funkcję tego typu piszesz tak samo. Oto mała funkcja, która uruchamia callback tylko wtedy, gdy warunek jest spełniony:

function runIf(condition, action) {
    if (condition) action();
}

runIf(2 + 2 === 4, () => console.log("matematyka nadal działa"));
runIf(false, () => console.log("nigdy się nie wykona"));

action to parametr, który akurat przechowuje funkcję. Wywołanie action() uruchamia to, co zostało przekazane.

Trzy, których naprawdę będziesz używać: map, filter, reduce

Tablice mają metody wyższego rzędu, które zastępują większość pętli for, jakie inaczej byś napisał. Naucz się tych trzech, a ogromna część codziennego kodu stanie się krótsza i czytelniejsza.

map: przekształć każdy element

const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.08);

console.log(withTax);

map wywołuje twoją funkcję raz dla każdego elementu i zbiera zwrócone wartości do nowej tablicy. Ta sama długość, przekształcona zawartość. Oryginalna tablica nie jest modyfikowana.

filter: zostaw pasujące

const users = [
    { name: "Ada", active: true },
    { name: "Boris", active: false },
    { name: "Chen", active: true },
];

const active = users.filter((user) => user.active);
console.log(active);

filter zostawia elementy, dla których callback zwraca wartość truthy, a resztę odrzuca. Wynikiem jest nowa tablica, być może krótsza.

reduce: zwiń tablicę do jednej wartości

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

reduce jest najbardziej uniwersalna. Callback dostaje bieżący akumulator i aktualny element, a to, co zwrócisz, staje się kolejnym akumulatorem. Drugi argument (tutaj 0) to wartość początkowa.

Możesz je łączyć w łańcuch. Właśnie tu ten styl się opłaca:

const orders = [
    { item: "book", price: 12, paid: true },
    { item: "pen", price: 3, paid: false },
    { item: "mug", price: 8, paid: true },
];

const revenue = orders
    .filter((o) => o.paid)
    .map((o) => o.price)
    .reduce((sum, p) => sum + p, 0);

console.log(revenue);

Czytaj od góry do dołu: zostaw opłacone zamówienia, wyciągnij cenę, zsumuj. Bez pętli, bez zmiennego licznika, bez martwienia się o błąd o jeden.

Zwracanie funkcji z funkcji

Druga połowa funkcji wyższego rzędu. Funkcja, która buduje i zwraca inną funkcję:

function multiplyBy(factor) {
    return (n) => n * factor;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));
console.log(triple(5));

multiplyBy(2) uruchamia się raz i oddaje zupełnie nową funkcję. Ta nowa funkcja wciąż pamięta factor. To domknięcie (closure), które ma później własną stronę. Na razie najważniejsze: wywołanie multiplyBy z różnymi argumentami daje różne wyspecjalizowane funkcje zbudowane z tego samego szablonu.

Ten wzorzec pojawia się wszędzie:

function prefixer(prefix) {
    return (message) => `[${prefix}] ${message}`;
}

const warn = prefixer("WARN");
const info = prefixer("INFO");

console.log(warn("disk almost full"));
console.log(info("backup complete"));

Jedna definicja, dwie funkcje wielokrotnego użytku. Lepsze niż ręczne pisanie warn i info i pilnowanie, żeby były spójne.

Funkcje nazwane kontra callbacki inline

Możesz przekazać funkcję strzałkową inline albo funkcję po nazwie. Oba sposoby działają, wybierz ten, który czyta się lepiej:

const nums = [1, 2, 3, 4, 5];

// Inline: good when the logic is short and used once.
const doubled = nums.map((n) => n * 2);

// By name: good when the logic has a meaningful name or is reused.
const isEven = (n) => n % 2 === 0;
const evens = nums.filter(isEven);

console.log(doubled, evens);

Gdy przekazujesz isEven (bez nawiasów), oddajesz samą funkcję. Dodanie () wywołałoby ją od razu i przekazało wynik. To częsty błąd początkujących:

nums.filter(isEven);     // correct: passes the function
nums.filter(isEven());   // wrong: calls isEven with no args, passes the result

Jeśli callback zaczyna się rozrastać ponad kilka linii, wydziel go i nadaj mu nazwę. Otaczający kod zwykle czyta się wtedy lepiej.

Przykład w praktyce

Funkcje wyższego rzędu błyszczą, gdy składasz małe elementy. Załóżmy, że masz listę produktów i chcesz nazwy tanich, dostępnych produktów, zapisane wielkimi literami:

const products = [
    { name: "notebook", price: 4, stock: 12 },
    { name: "laptop", price: 900, stock: 0 },
    { name: "pen", price: 1, stock: 50 },
    { name: "desk", price: 200, stock: 3 },
];

const affordable = (p) => p.price < 50;
const inStock = (p) => p.stock > 0;

const result = products
    .filter(affordable)
    .filter(inStock)
    .map((p) => p.name.toUpperCase());

console.log(result);

Każda funkcja pomocnicza ma jedno zadanie. Każda metoda tablicowa wykonuje jedno przekształcenie. Taki potok czyta się jak specyfikację tego, czego chcesz, a nie opis tego, jak zrobić pętlę.

Kiedy po nie nie sięgać

Metody wyższego rzędu są świetne, ale nie zastępują pętli w każdej sytuacji:

• Jeśli musisz przerwać w połowie, for lub for...of z break jest czytelniejsze niż próby wyskoczenia z forEach.
• Jeśli w callbacku robisz coś asynchronicznego, map i forEach nie poczekają na wynik. Użyj for...of z await albo Promise.all z map.
• Jeśli callback modyfikuje współdzielony stan, oddalasz się od mocnych stron tego stylu. Sięgnij po zwykłą pętlę albo przepisz kod tak, by zwracał nowe wartości.

Użyte tam, gdzie pasują, map, filter i reduce wycinają większość pętlowego boilerplate'u z codziennego kodu. Użyte wszędzie, zaczynają szkodzić czytelności. Wybierz narzędzie, które najlepiej pokazuje intencję.

Dalej: obiekty

Funkcje to nie jedyne wartości, na których warto budować. Obiekty to w JavaScript podstawowe narzędzie do grupowania powiązanych danych i zachowań. To właśnie nimi były wypełnione tablice, które przed chwilą filtrowaliśmy i mapowaliśmy. O nich jest następna strona.