Funkcje w JavaScript

Po co się tego uczymy?

Funkcje strzałkowe są wszechobecne w nowoczesnym JavaScript, zwłaszcza przy obsłudze zdarzeń (kolejna lekcja) — bez zrozumienia funkcji nie zrozumiesz, jak podpiąć kod pod kliknięcie przycisku.

Teoria

Funkcje pozwalają zamknąć powtarzalny fragment kodu w jednym miejscu i wywoływać go wielokrotnie, z różnymi danymi wejściowymi — dokładnie ta sama idea, co w PHP (Lekcja 6 działu Aplikacje internetowe PHP) i C#.

JavaScript ma dwa główne sposoby zapisu funkcji:
Deklaracja funkcji (klasyczna, czytelna forma):
function nazwaFunkcji(parametr1, parametr2) { ... return wynik; }

Funkcja strzałkowa (arrow function) — nowocześniejszy, krótszy zapis, bardzo często używany przy obsłudze zdarzeń (Lekcja 5):
const nazwaFunkcji = (parametr1, parametr2) => { ... return wynik; };
Jeśli funkcja strzałkowa ma tylko jedną instrukcję zwracającą wynik, można pominąć nawiasy klamrowe i słowo return: const podwoj = liczba => liczba * 2;

Parametry mogą mieć wartości domyślne: function powitanie(imie = "Gościu") { ... } — dokładnie jak w PHP.

Przykład z życia

Kiedy widzisz w internecie kod z zapisem () => { ... }, to właśnie funkcja strzałkowa — dziś jest to standardowy, powszechnie stosowany zapis w prawdziwych projektach JavaScript.

Kod (JavaScript)

// klasyczna deklaracja funkcji
function obliczCeneKoncowa(cena, rabatProcent) {
    const rabat = cena * (rabatProcent / 100);
    return cena - rabat;
}

const cenaKoncowa = obliczCeneKoncowa(50, 20);
console.log("Cena po rabacie: " + cenaKoncowa + " zł"); // 40

// funkcja strzałkowa z pełnym zapisem
const czyPelnoletni = (wiek) => {
    return wiek >= 18;
};

// funkcja strzałkowa - skrócony zapis (jedna instrukcja)
const podwojCene = cena => cena * 2;

console.log(czyPelnoletni(16)); // false
console.log(podwojCene(9.99));  // 19.98

// parametr z wartością domyślną
function powitanie(imie = "Gościu") {
    return "Witaj, " + imie + "!";
}
console.log(powitanie());          // "Witaj, Gościu!"
console.log(powitanie("Kasia"));   // "Witaj, Kasia!"

Komentarz i wyjaśnienie kodu

Funkcja strzałkowa cena => cena * 2 to skrócona forma function(cena) { return cena * 2; } — strzałka => zastępuje słowo function, a brak klamer i return jest dozwolony tylko wtedy, gdy funkcja ma DOKŁADNIE jedną instrukcję, której wynik jest automatycznie zwracany. Gdy funkcja ma więcej niż jeden parametr, trzeba je opakować w nawias: (a, b) => a + b.

Ćwiczenie samodzielne

Napisz funkcję obliczPole(bok) zwracającą pole kwadratu, wywołaj ją z kilkoma różnymi wartościami.

Zadania do pracy własnej

Napisz funkcję strzałkową sprawdzającą, czy liczba jest parzysta, zwracającą true/false.
Napisz funkcję formatujCene(cena) zwracającą tekst w formacie "9.99 zł" na podstawie samej liczby.
Napisz funkcję obliczWartoscKoszyka(tablicaProduktow), która przyjmuje tablicę obiektów {cena, ilosc} i zwraca sumę wartości wszystkich pozycji (cena razy ilość dla każdej pozycji, zsumowane) — to dokładnie logika, której użyjesz w Lekcji 8 do podsumowania koszyka przed wysłaniem formularza.

Typowe błędy

Częsty błąd to zapomnienie return w klasycznej funkcji — wtedy funkcja zwraca undefined zamiast oczekiwanej wartości, mimo że w środku "coś liczy". Drugi błąd: mylenie zapisu funkcji strzałkowej z jednym a wieloma parametrami (nawiasy wokół pojedynczego parametru są opcjonalne, ale przy wielu — obowiązkowe). Trzeci: próba użycia return wewnątrz funkcji strzałkowej zapisanej w skróconej, jednolinijkowej formie (to błąd składniowy — skrócona forma sama "zwraca" wynik bez tego słowa).

Nawiązanie do egzaminu zawodowego

To realizacja efektu INF.03.5.2.6: "stosuje funkcje oraz wybrane biblioteki skryptowych języków programowania" — funkcje w JS są też niezbędnym narzędziem do dalszych lekcji o obsłudze zdarzeń (Lekcja 5) i manipulacji DOM (Lekcja 6).