JavaScript Academy · Lekcja

Funkcje czyste i efekty uboczne

Proszę pisać przewidywalne funkcje, które można testować.

Funkcje czyste i efekty uboczne to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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.

Co sprawia, że funkcja jest czysta

Czysta funkcja ma dwie właściwości: dla tych samych danych wejściowych zawsze zwraca ten sam wynik i nie powoduje obserwowalnych efektów ubocznych. Czyste funkcje są przewidywalne i łatwe do testowania.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

Deterministyczny wynik

Czystość oznacza determinizm. Te same argumenty muszą zawsze prowadzić do tego samego wyniku, bez zależności od ukrytego stanu, czasu ani losowości.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

Czym jest efekt uboczny

Efekt uboczny to wszystko, co funkcja robi poza zwróceniem wartości: logowanie, modyfikowanie zewnętrznego stanu, zapis do pamięci, wywołania sieciowe lub zmienianie argumentów.

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

Zależność od zewnętrznego stanu

Odczytywanie zmiennego stanu zewnętrznego również narusza czystość, ponieważ wynik zmienia się, nawet gdy argument pozostaje taki sam.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

Zapewnianie czystości funkcji

Należy przekazać jako argumenty wszystko, czego funkcja potrzebuje. Wtedy jej wynik zależy wyłącznie od danych wejściowych.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

Modyfikowanie argumentów oznacza nieczystość

Zmiana przekazanego obiektu lub tablicy jest efektem ubocznym, który może zaobserwować kod wywołujący. Czyste funkcje nie modyfikują swoich danych wejściowych.

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

Zwracanie nowych wartości

Czysta wersja tworzy i zwraca nową wartość zamiast modyfikować dane wejściowe.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

Dlaczego czystość pomaga

Czyste funkcje można bezproblemowo testować (bez konfiguracji i atrap), bezpiecznie zapamiętywać (memoizować) oraz bezpiecznie uruchamiać w dowolnej kolejności lub równolegle. Ułatwiają rozumowanie o kodzie w jego lokalnym kontekście.

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

Izolowanie nieczystości

Nie można uniknąć wszystkich efektów ubocznych — aplikacje muszą logować, pobierać dane i renderować. Celem jest przeniesienie efektów na obrzeża aplikacji i zachowanie czystości głównej logiki.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

Przezroczystość referencyjna

Czyste wywołanie można zastąpić jego wynikiem bez zmiany działania programu. W dowolnym miejscu add(2, 3) można zamienić na 5. Ta właściwość nosi nazwę przezroczystości referencyjnej.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

Rozpoznawanie nieczystości

Należy zwracać uwagę na następujące oznaki: console, Math.random, Date.now, przypisania do zmiennych zewnętrznych lub modyfikowanie argumentów. Każda z tych rzeczy sprawia, że funkcja jest nieczysta.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

Szybkie sprawdzenie

Rozpoznawanie czystych funkcji.

Podsumowanie

Czyste funkcje są deterministyczne i wolne od efektów ubocznych: nie modyfikują stanu zewnętrznego ani argumentów i nie wykonują operacji wejścia-wyjścia. Należy przekazywać zależności jako argumenty i zwracać nowe wartości zamiast modyfikować istniejące. Czystość zapewnia łatwe testowanie, memoizację, przezroczystość referencyjną i bezpieczeństwo działania równoległego. Należy zachować czystość głównej logiki i przenieść efekty na obrzeża aplikacji.

Często zadawane pytania

Czy lekcja „Funkcje czyste i efekty uboczne” jest bezpłatna?

Tak — pełny tekst „Funkcje czyste i efekty uboczne” 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 „Funkcje czyste i efekty uboczne”?

Proszę pisać przewidywalne funkcje, które można testować. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Funkcje czyste i efekty uboczne”?

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