JavaScript Academy · Lekcja

Kompozycja funkcji

Proszę łączyć małe funkcje w potoki.

Kompozycja funkcji to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest kompozycja funkcji?

Kompozycja funkcji łączy małe funkcje w jedną. Kompozycja funkcji f i g tworzy funkcję, w której wynik g staje się argumentem funkcji f.

W ujęciu matematycznym: compose(f, g)(x) = f(g(x)). Dane przepływają od prawej do lewej.

Dwie małe funkcje

Kompozycję zaczyna się od prostych funkcji o jednym zadaniu. Oto dwie transformacje, które połączymy.

const double = x => x * 2;
const increment = x => x + 1;

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

Ręczne tworzenie kompozycji

Najbardziej bezpośrednia kompozycja polega po prostu na wywołaniu jednej funkcji na wyniku innej. Należy czytać to od środka: najpierw wykonuje się increment, a następnie double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Funkcja compose dla dwóch funkcji

Warto ująć ten wzorzec w wielokrotnego użytku funkcję compose. Przyjmuje ona f i g, a następnie zwraca nową funkcję, która najpierw stosuje g, a potem f.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

Kolejność ma znaczenie

Kompozycja nie jest przemienna. compose(f, g) różni się od compose(g, f), ponieważ funkcja po prawej stronie jest wykonywana jako pierwsza.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Czytanie od prawej do lewej

W wywołaniu compose(a, b, c)(x) obliczenia przebiegają jako a(b(c(x))). Funkcja znajdująca się najbardziej na prawo jako pierwsza otrzymuje dane wejściowe. Należy pamiętać o tym kierunku, aby uniknąć błędów.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Kompozycja transformacji tekstu

Kompozycja świetnie sprawdza się w potokach przetwarzania tekstu: usuwanie białych znaków, zamiana na małe litery, a następnie zastępowanie spacji — każdy etap jest małą funkcją.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Kompozycja operacji na liczbach

Łączenie operacji matematycznych to klasyczny przykład. Każdą funkcję można łatwo testować niezależnie.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Po co stosować compose?

Kompozycja pozwala zachować skupienie i możliwość ponownego użycia każdej funkcji, a także usuwa bałagan zagnieżdżonych wywołań. Zamiast rozrzucać po kodzie wyrażenie f(g(h(x))), można raz zbudować nazwany potok i używać go ponownie.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Kompozycja i kurryfikacja razem

Funkcje skurryfikowane doskonale się komponują, ponieważ każda z nich zwraca funkcję jednoargumentową — dokładnie taką, jakiej oczekuje kompozycja.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

W stronę wielu funkcji

Do tej pory compose obsługiwała dwie funkcje. Rzeczywista kompozycja obsługuje dowolną ich liczbę. W następnej lekcji zbudują Państwo ogólną funkcję compose oraz jej odwróconą, działającą od lewej do prawej wersję pipe, używając reduce.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Szybkie sprawdzenie

Jeśli compose = (f, g) => x => f(g(x)), co zwraca compose(double, increment)(5), gdy double mnoży przez 2, a increment zwiększa wartość o 1?

Podsumowanie: kompozycja funkcji

Poznali Państwo sposób łączenia funkcji:

compose(f, g)(x) jest równe f(g(x)) i jest obliczane od prawej do lewej.
Kolejność ma znaczenie: kompozycja nie jest przemienna.
Kompozycja pozwala zachować funkcje małe, nazwane i wielokrotnego użytku.
Funkcje skurryfikowane łatwo się komponują. Następnie uogólnimy rozwiązanie na dowolną liczbę funkcji.

Często zadawane pytania

Czy lekcja „Kompozycja funkcji” jest bezpłatna?

Tak — pełny tekst „Kompozycja funkcji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kompozycja funkcji”?

Proszę łączyć małe funkcje w potoki. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Kompozycja funkcji”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy