1) Co to jest funkcja?

Funkcja to fragment kodu, który:

• ma nazwę (czasem nie ma),
• może przyjmować dane wejściowe (parametry),
• wykonuje instrukcje,
• może zwracać wynik (return).

function przywitaj() {
  console.log("Cześć!");
}
przywitaj(); // wywołanie funkcji

Definicja tworzy funkcję, a wywołanie uruchamia jej kod.

2) Parametry i argumenty

Parametry to „zmienne” w nawiasie przy definicji funkcji, a argumenty to wartości,
które przekazujesz przy wywołaniu.

function przywitaj(imie) {      // parametr: imie
  console.log("Cześć, " + imie);
}
przywitaj("Marcin");            // argument: "Marcin"

Możesz przekazać kilka argumentów:

function poleProstokata(a, b) {
  return a * b;
}
const wynik = poleProstokata(4, 6); // 24

3) return – zwracanie wyniku i kończenie funkcji

return robi dwie rzeczy: zwraca wartość oraz kończy działanie funkcji od razu (kod poniżej już się nie wykona).
Jeśli funkcja nie ma return, zwraca undefined.

function czyPelnoletni(wiek) {
  if (wiek >= 18) return true;
  return false;
}

4) Różne sposoby zapisu funkcji

a) Function Declaration (deklaracja)

Możesz wywołać ją nawet przed definicją (hoisting).

sumuj(2, 3); // działa
function sumuj(a, b) {
  return a + b;
}

b) Function Expression (wyrażenie)

Funkcja jest przypisana do zmiennej. Tego typu funkcji nie wywołasz przed utworzeniem.

const sumuj = function(a, b) {
  return a + b;
};
sumuj(2, 3);

c) Arrow Function (funkcja strzałkowa)

Najczęściej używana w nowoczesnym JS.

const sumuj = (a, b) => a + b;

Jeśli jest tylko jeden parametr, nawiasy mogą być pominięte:

const podwoj = x => x * 2;

5) Zakres (scope): gdzie „żyją” zmienne?

Zmienne zadeklarowane w funkcji są lokalne – dostępne tylko wewnątrz niej.

function test() {
  const sekret = 123;
  console.log(sekret);
}
test();
// console.log(sekret); // błąd: sekret is not defined

To chroni kod przed konfliktem nazw i przypadkowymi zmianami.

6) Funkcje jako „wartości” (first-class citizens)

W JavaScripcie funkcję możesz przypisać do zmiennej, przekazać jako argument albo zwrócić z innej funkcji.
Przekazywanie funkcji jako argumentu nazywamy często callbackiem.

function wykonajOperacje(a, b, operacja) {
  return operacja(a, b);
}
const dodaj = (x, y) => x + y;
const mnoz = (x, y) => x * y;
console.log(wykonajOperacje(2, 3, dodaj)); // 5
console.log(wykonajOperacje(2, 3, mnoz));  // 6

To podstawa działania np. addEventListener, map, filter.

7) Funkcje i zdarzenia w przeglądarce

Funkcje świetnie pasują do obsługi formularzy i kliknięć:

<button id="btn">Kliknij</button>
<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    alert("Klik!");
  });
</script>

Tu przekazujesz funkcję, która uruchomi się dopiero, gdy nastąpi zdarzenie.

8) this w funkcjach: ważna różnica

W klasycznej funkcji function(){} wartość this zależy od sposobu wywołania.
W strzałkowej () => {} nie ma własnego this – „dziedziczy” je z otoczenia.

const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  console.log(this); // == btn (element)
});
btn.addEventListener("click", () => {
  console.log(this); // zwykle window / undefined (w strict) zależnie od kontekstu
});

W eventach DOM, jeśli chcesz this jako element, używaj zwykłej funkcji.

9) Dobre praktyki

• Jedna funkcja = jedna odpowiedzialność (mniej „kombinowania”).
• Nadawaj czytelne nazwy: obliczWynik, pobierzDaneFormularza, walidujEmail.
• Unikaj długich funkcji – łatwiej je testować i utrzymywać.
• Tam gdzie się da, zwracaj wynik zamiast mieszać logikę z console.log.