Funkcje w JavaScript
1. Wprowadzenie
Funkcja to jeden z fundamentalnych elementów JavaScriptu – to blok kodu, który można nazwać i wielokrotnie wywołać w programie.
Funkcje pozwalają: * unikać duplikacji kodu – piszemy raz, używamy wielokrotnie, * organizować kod w logiczne, niezależne fragmenty, * tworzyć abstrakcję – ukrywać szczegóły implementacji, * przyjmować parametry i zwracać wartości.
W JavaScript funkcje są obywatelami pierwszej klasy (first-class citizens), co oznacza, że: * mogą być przypisywane do zmiennych, * mogą być przekazywane jako argumenty do innych funkcji, * mogą być zwracane z innych funkcji.
2. Sposoby definiowania funkcji
W JavaScript istnieje kilka sposobów definiowania funkcji:
- Deklaracja funkcji (function declaration)
- Wyrażenie funkcyjne (function expression)
- Arrow function (funkcja strzałkowa) – ES6
- IIFE (Immediately Invoked Function Expression)
- Konstruktor funkcji (rzadko używany)
3. Deklaracja funkcji (Function Declaration)
Najprostszy i najpopularniejszy sposób definiowania funkcji.
Składnia:
Przykład:
Cechy:
- Jest hoistowana – można wywołać przed definicją
- Ma nazwę – łatwiej debugować
4. Wyrażenie funkcyjne (Function Expression)
Funkcja przypisana do zmiennej.
Składnia:
Przykład:
Cechy:
- Nie jest hoistowana – można wywołać tylko po definicji
- Często używana przy przekazywaniu funkcji jako argumentu
5. Arrow Function (Funkcja strzałkowa) – ES6
Nowoczesna, zwięzła składnia wprowadzona w ES6.
Składnia:
Przykład podstawowy:
Skrócona forma (implicit return):
Gdy funkcja ma tylko jedną instrukcję, można pominąć {} i return:
Przykłady skrócone:
Różnice między arrow function a tradycyjną:
| Cecha | Arrow Function | Tradycyjna funkcja |
|---|---|---|
| Składnia | Krótsza | Dłuższa |
this |
Leksykalne (z kontekstu) | Dynamiczne |
| Hoisting | ❌ Nie | ✅ Tak (deklaracja) |
| Użycie jako metoda | ❌ Niezalecane | ✅ Tak |
6. Parametry funkcji
Funkcje mogą przyjmować parametry – wartości przekazywane podczas wywołania.
Przykład:
Parametry domyślne (ES6):
Rest parameters (...):
Pozwala na przyjmowanie nieograniczonej liczby argumentów.
7. Zwracanie wartości (return)
Funkcja może zwracać wartość za pomocą słowa kluczowego return.
Uwagi:
* Funkcja bez return zwraca undefined
* return kończy wykonywanie funkcji
8. Funkcje jako argumenty (Callback functions)
Funkcje mogą być przekazywane jako argumenty do innych funkcji.
Przykład z forEach():
9. Funkcje zwracające funkcje (Higher-order functions)
Funkcje mogą zwracać inne funkcje.
Z arrow functions:
10. Scope (Zakres zmiennych)
Scope określa, gdzie zmienna jest dostępna.
Scope globalny:
Scope funkcyjny:
Scope blokowy (let, const):
11. Closures (Domknięcia)
Closure to funkcja, która zapamiętuje zmienne z zewnętrznego zakresu, nawet po zakończeniu funkcji zewnętrznej.
Dlaczego to działa?
Funkcja wewnętrzna "zapamiętała" zmienną count z funkcji zewnętrznej.
12. IIFE (Immediately Invoked Function Expression)
Funkcja, która wykonuje się natychmiast po zdefiniowaniu.
Z parametrami:
Zastosowanie: * Izolacja zmiennych (nie zaśmiecają global scope) * Wzorzec modułowy (przed ES6)
13. Rekurencja
Funkcja może wywoływać samą siebie.
Uwaga: Rekurencja musi mieć warunek zatrzymania, inaczej powstanie nieskończona pętla.
14. Dobre praktyki
- Używaj arrow functions dla krótkich funkcji i callbacks
- Nadawaj funkcjom opisowe nazwy (czasowniki:
getUserData,calculateTotal) - Jedna funkcja – jedno zadanie (Single Responsibility Principle)
- Używaj parametrów domyślnych zamiast sprawdzania
undefined - Preferuj czyste funkcje (pure functions) – te same argumenty dają te same wyniki, bez efektów ubocznych
- Unikaj zbyt głębokiej rekurencji – może prowadzić do stack overflow
15. Przykłady praktyczne
Walidacja danych:
Sortowanie obiektów:
16. Podsumowanie
| Typ funkcji | Składnia | Hoisting | Użycie |
|---|---|---|---|
| Deklaracja | function name() {} |
✅ Tak | Funkcje nazwane |
| Wyrażenie | const name = function() {} |
❌ Nie | Funkcje jako wartości |
| Arrow function | const name = () => {} |
❌ Nie | Krótkie funkcje, callbacks |
| IIFE | (function() {})() |
❌ Nie | Izolacja scope |
17. Wnioski
- Funkcje są fundamentem programowania w JavaScript
- Arrow functions to nowoczesny i zwięzły sposób definiowania funkcji
- Funkcje mogą być przekazywane, zwracane i przechowywane w zmiennych
- Closures pozwalają na tworzenie prywatnych zmiennych i zaawansowanych wzorców
- Znajomość funkcji jest kluczowa dla efektywnego programowania w JavaScript
Podsumowanie praktyczne:
Opanuj wszystkie formy definiowania funkcji, zrozum closures i scope – to klucz do pisania czystego, modularnego i wydajnego kodu JavaScript.