6. Funkcje – deklaracja, function expression, arrow functions

1. Function Declaration (najstarszy i klasyczny sposób)

Można wywołać funkcję przed jej zdefiniowaniem – dzięki mechanizmowi hoisting.

przywitaj("Kasia");           // działa!

function przywitaj(imie) {
  console.log(`Cześć, ${imie}!`);
}

przywitaj("Tomek");

2. Function Expression (wyrażenie funkcyjne)

Funkcja przypisana do zmiennej. Nie podlega hoistingowi – można jej użyć dopiero po definicji.

// powitanie = undefined → błąd przy wywołaniu przed linią poniżej
// powitanie("Asia");     // TypeError: powitanie is not a function

const powitanie = function(imie) {
  console.log(`Hej, ${imie} 👋`);
};

powitanie("Asia");         // działa

Nazwa funkcji w tym przypadku jest opcjonalna → najczęściej się jej nie pisze.

3. Arrow Function (⇒) – obecnie najczęściej używana (2025/2026)

Najkrótszy i najczęściej spotykany zapis w nowoczesnym JavaScript (React, Node, Vue, Next.js itd.)

// 1. Pełna wersja
const razyDwa   = (x) => { return x * 2; };

// 2. Skrócona – jedna linia = implicit return
const razyTrzy  = x => x * 3;

// 3. Zero argumentów → nawiasy obowiązkowe
const hello     = () => console.log("Cześć!");

// 4. Kilka parametrów
const suma      = (a, b) => a + b;

// 5. Z blokiem kodu (trzeba napisać return)
const witajDuze = imie => {
  const duze = imie.toUpperCase();
  return `Witaj królowo ${duze}!`;
};

4. Czym się różnią arrow functions od zwykłych funkcji?

Cecha	function / declaration	arrow function
Hoisting	Tak	Nie
własne this	Tak	Nie – dziedziczy z otoczenia
konstruktor (new)	Tak	Nie
argumenty (arguments)	Tak	Nie
składnia	bardziej rozwlekła	bardzo zwięzła

5. Najczęstsze pułapki początkujących

• Wywołanie arrow function / expression przed deklaracją → błąd
• Użycie this w arrow function w metodzie obiektu → this będzie window / undefined
• Zapominanie return w bloku {}
• Pisanie () => { return ... } wszędzie – nie trzeba, gdy jedna instrukcja

6. Szybkie porównanie – który styl wybrać?

// Klasycznie (stare projekty, czasem edukacja)
function pomnoz(a, b) {
  return a * b;
}

// Funkcja jako wartość (często callbacki)
const pomnoz = function(a, b) {
  return a * b;
};

// Najczęściej w 2025/2026
const pomnoz = (a, b) => a * b;

// Bardzo częsty wzorzec w React / nowoczesnym JS
const Button = ({ text, onClick }) => (
<button onClick={onClick}>{text}></button>
);