32. Definiowanie funkcji w JavaScript

Podstawy definiowania funkcji
iko

Funkcje w JavaScript to bloki kodu, które można wywoływać wielokrotnie. Są niezbędne do tworzenia czytelnego, modularnego i łatwego w utrzymaniu kodu. Poniżej przedstawiam trzy podstawowe sposoby definiowania funkcji.

1. Deklaracja funkcji (Function Declaration)

Funkcje zadeklarowane w ten sposób są hoistowane, co oznacza, że można je wywołać przed ich zdefiniowaniem w kodzie. Jest to przydatne, ale wymaga ostrożności, aby nie wprowadzać nieczytelności.

function powitanie(imie) {
  return `Witaj, ${imie}!`;
}

console.log(powitanie("Tadeusz")); // "Witaj, Tadeusz!"
Uwaga: W PhpStorm możesz użyć skrótu Alt + Insert, aby szybko wygenerować szkielet funkcji.
2. Wyrażenie funkcyjne (Function Expression)

Funkcja jest przypisywana do zmiennej. W tym przypadku funkcja nie jest hoistowana, więc można ją wywołać dopiero po zdefiniowaniu. Jest to przydatne, gdy chcesz kontrolować, kiedy funkcja jest dostępna w kodzie.

const kwadrat = function(liczba) {
  return liczba * liczba;
};

console.log(kwadrat(5)); // 25
3. Funkcje strzałkowe (Arrow Functions, ES6+)

To skrócona składnia definiowania funkcji, która jest szczególnie przydatna przy krótkich funkcjach. Funkcje strzałkowe nie mają własnego kontekstu this, co jest przydatne przy pracy z obiektami lub zdarzeniami.

const dodaj = (a, b) => a + b;
console.log(dodaj(2, 3)); // 5

const powitanieStrzalkowe = imie => `Cześć, ${imie}!`;
console.log(powitanieStrzalkowe("Tadeusz")); // "Cześć, Tadeusz!"
Porada: W PhpStorm możesz użyć skrótu Alt + L, aby szybko wstawić polską literę „ł” podczas pisania komentarzy lub nazywania zmiennych.
Parametry i wartość zwracana
Parametry funkcji

Funkcje mogą przyjmować parametry, które są zmiennymi używanymi wewnątrz funkcji. Podczas wywołania funkcji przekazujemy argumenty, które zastępują parametry.

function pomnoz(a, b) {
  return a * b;
}

console.log(pomnoz(4, 5)); // 20
Wartość zwracana (return)

Funkcje mogą zwracać wartości za pomocą słowa kluczowego return. Jeśli funkcja nie zwraca jawnie wartości, domyślnie zwraca undefined.

function czyParzysta(liczba) {
  return liczba % 2 === 0;
}

console.log(czyParzysta(4)); // true
console.log(czyParzysta(5)); // false
Zakres zmiennych (scope)

Zmienne zadeklarowane wewnątrz funkcji są lokalne i nie są dostępne poza nią. To pozwala unikać konfliktów nazw zmiennych i tworzyć bardziej bezpieczny kod.

function pokazZakres() {
  const lokalnaZmienna = "Jestem lokalna!";
  console.log(lokalnaZmienna);
}

pokazZakres(); // "Jestem lokalna!"
console.log(lokalnaZmienna); // Błąd: lokalnaZmienna is not defined
Dlaczego warto używać funkcji?
  • Modularność: Kod jest podzielony na logiczne bloki, co ułatwia jego utrzymanie.
  • Ponowne użycie: Funkcje można wywoływać wielokrotnie, co oszczędza czas.
  • Czytelność: Dobrze nazwane funkcje sprawiają, że kod jest łatwiejszy do zrozumienia.
  • Testowalność: Funkcje można łatwo testować jednostkowo.
Uwaga dla PhpStorm: Możesz użyć skrótu Ctrl + Shift + T, aby szybko utworzyć test jednostkowy dla danej funkcji.
Zaawansowane przykłady
Funkcje wyższego rzędu

Funkcje, które przyjmują inne funkcje jako argumenty lub zwracają funkcje, nazywamy funkcjami wyższego rzędu. Są one podstawą programowania funkcyjnego w JavaScript.

function powtorz(funkcja, liczbaPowtorzen) {
  for (let i = 0; i < liczbaPowtorzen; i++) {
    funkcja();
  }
}

const witaj = () => console.log("Cześć!");
powtorz(witaj, 3); // "Cześć!" (3 razy)
Domknięcia (closures)

Domknięcia to funkcje, które pamiętają środowisko, w którym zostały utworzone. Są przydatne do tworzenia prywatnych zmiennych i funkcji.

function tworzLicznik() {
  let licznik = 0;
  return function() {
    licznik++;
    return licznik;
  };
}

const licznik = tworzLicznik();
console.log(licznik()); // 1
console.log(licznik()); // 2