JavaScript od fundamentów do praktyki

Funkcje JS, które zamieniają chaos w czytelny kod.

Funkcja to jeden z najważniejszych mechanizmów JavaScriptu: pozwala nazwać logikę, oddzielić odpowiedzialności, testować fragmenty aplikacji i budować kod, który da się rozwijać bez bólu.

Zobacz przykłady kodu → Uruchom mini-demo

01Hermetyzacja logiki

02Reużywalne fragmenty kodu

03Łatwiejsze testowanie

Mapa wpisu

Od definicji funkcji do profesjonalnego stylu pisania kodu.

Ten wpis prowadzi przez podstawy, różnice między deklaracjami i wyrażeniami, funkcje strzałkowe, parametry, zakres, domknięcia oraz praktyki, które realnie poprawiają jakość aplikacji.

Nazwana logika

Funkcja zamienia serię instrukcji w nazwany, możliwy do ponownego użycia blok. Dobra nazwa często mówi więcej niż komentarz.

↩

Wartość zwrotna

return kończy wykonanie funkcji i przekazuje wynik dalej. Dzięki temu funkcje można składać jak klocki.

{ }

Własny zakres

Parametry, zmienne lokalne i domknięcia pozwalają kontrolować dostęp do danych oraz ograniczać efekty uboczne.

Fundament

Funkcja to kontrakt: dane wejściowe → logika → wynik.

Najlepsze funkcje są małe, konkretne i przewidywalne. Przyjmują parametry, wykonują jedną odpowiedzialność i zwracają wynik bez niepotrzebnego modyfikowania świata zewnętrznego.

parametry return scope closure pure function

Typ	Kiedy używać
Deklaracja	Gdy funkcja ma być czytelnie nazwana i dostępna w całym zakresie dzięki hoistingowi.
Wyrażenie funkcyjne	Gdy funkcja jest przypisywana do zmiennej, przekazywana jako callback lub tworzona warunkowo.
Funkcja strzałkowa	Gdy chcesz krótkiej składni i leksykalnego zachowania `this`.

function calculateNetPrice(grossPrice, taxRate = 0.23) {
  if (grossPrice < 0) {
    throw new Error("Cena brutto nie może być ujemna.");
  }

  const divisor = 1 + taxRate;
  return Number((grossPrice / divisor).toFixed(2));
}

const netPrice = calculateNetPrice(123);
console.log(netPrice); // 100

Przykłady premium

Kod z numeracją linii i przyciskiem kopiowania.

Każdy blok poniżej możesz skopiować jednym kliknięciem. Mechanizm działa bez dodatkowej biblioteki — tylko HTML, CSS i czysty JavaScript.

Declaration

Deklaracja funkcji

Deklaracje są czytelne i dobrze sprawdzają się dla głównych operacji w module. Są hoistowane, więc można je wywołać przed miejscem definicji.

const total = sumCart([49, 99, 149]);

function sumCart(prices) {
  return prices.reduce((sum, price) => sum + price, 0);
}

console.log(`Do zapłaty: ${total} zł`);

const products = [
  { name: "Kurs JS", price: 199, active: true },
  { name: "E-book", price: 59, active: false },
  { name: "Mentoring", price: 499, active: true },
];

const activeProducts = products.filter((product) => product.active);
const names = activeProducts.map((product) => product.name);

console.log(names); // ["Kurs JS", "Mentoring"]

Arrow

Funkcja strzałkowa

Funkcje strzałkowe są świetne do krótkich transformacji danych, callbacków i pracy z metodami tablicowymi, takimi jak map, filter i reduce.

Closure

Domknięcie: funkcja pamięta swoje otoczenie

Domknięcie powstaje wtedy, gdy funkcja wewnętrzna ma dostęp do zmiennych funkcji zewnętrznej nawet po zakończeniu jej wykonania. To fundament prywatnego stanu, fabryk funkcji i wielu wzorców w JavaScript.

Profesjonalna zasada: używaj domknięć świadomie. Są potężne, ale nie powinny zastępować prostszych struktur, jeśli problem ich nie wymaga.

function createCounter(initialValue = 0) {
  let value = initialValue;

  return {
    increment() {
      value += 1;
      return value;
    },
    decrement() {
      value -= 1;
      return value;
    },
    getValue() {
      return value;
    },
  };
}

const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.getValue());  // 11

Interaktywne demo

Mini-kalkulator pokazujący funkcję jako czarną skrzynkę.

Zmieniasz argumenty, wybierasz operację, a funkcja oblicza wynik. To proste demo dobrze pokazuje ideę wejścia, logiki i wartości zwrotnej.

Argument A

Argument B

Funkcja

input function body return

16 add(12, 4) zwraca 16

Clean Code

Jak pisać funkcje, które nie męczą zespołu?

Jedna odpowiedzialność

Funkcja powinna robić jedną rzecz na jednym poziomie abstrakcji. Jeśli miesza walidację, zapis i formatowanie — rozbij ją.

Dobra nazwa

Nazwa powinna wyjaśniać intencję: calculateDiscount jest lepsze niż doStuff.

Minimalne efekty uboczne

Najłatwiej testować funkcje, które zwracają wynik na podstawie argumentów i nie modyfikują ukrytego stanu.

Checklist senior developera

Unikaj zbyt wielu parametrów

Gdy funkcja przyjmuje 5–7 argumentów, rozważ obiekt konfiguracyjny.

Waliduj dane wejściowe

Nie zakładaj, że funkcja zawsze dostanie idealne wartości.

Zwracaj spójny typ

Funkcja, która raz zwraca tablicę, a raz boolean, komplikuje kod wywołujący.

Nie ukrywaj logiki

Krótszy zapis nie zawsze oznacza lepszy kod. Czytelność wygrywa z popisem składni.

Wzorzec praktyczny

Funkcja czysta kontra funkcja z efektem ubocznym.

W projektach produkcyjnych nie chodzi o to, aby wszystkie funkcje były czyste. Chodzi o to, aby efekty uboczne były świadome, ograniczone i łatwe do znalezienia.

function calculateDiscountPrice(price, discountPercent) {
  if (discountPercent < 0 || discountPercent > 100) {
    throw new Error("Rabat musi być w zakresie 0-100.");
  }

  const discount = price * (discountPercent / 100);
  return Number((price - discount).toFixed(2));
}

const finalPrice = calculateDiscountPrice(250, 20);
console.log(finalPrice); // 200

const auditLog = [];

function saveAuditEvent(event) {
  const entry = {
    id: crypto.randomUUID(),
    event,
    createdAt: new Date().toISOString(),
  };

  auditLog.push(entry);
  return entry;
}

saveAuditEvent("USER_LOGIN");
console.table(auditLog);

Podsumowanie

Funkcje są fundamentem dobrego JavaScriptu.

Gdy rozumiesz parametry, return, zakres, funkcje strzałkowe, domknięcia i efekty uboczne, zaczynasz pisać kod bardziej przewidywalny, testowalny i gotowy na rozwój projektu.

Wróć do spisu ↑