Funkcje w JavaScript - kompletny przewodnik dla początkujących

Czym są funkcje w JavaScript?

Funkcje to bloki kodu, które wykonują określone zadania. Są one podstawowym elementem każdego języka programowania i pozwalają na organizację kodu w logiczne, wielokrotnego użytku fragmenty.

Sposoby definiowania funkcji

1. Deklaracja funkcji (Function Declaration)

function powitanie(imie) {
    return "Witaj, " + imie + "!";
}

console.log(powitanie("Anna")); // Witaj, Anna!

2. Wyrażenie funkcyjne (Function Expression)

const powitanie = function(imie) {
    return "Witaj, " + imie + "!";
};

console.log(powitanie("Jan")); // Witaj, Jan!

3. Funkcje strzałkowe (Arrow Functions)

const powitanie = (imie) => {
    return "Witaj, " + imie + "!";
};

// Skrócona forma dla jednej linii
const powitanieKrotkie = imie => "Witaj, " + imie + "!";

Parametry i argumenty

Funkcje mogą przyjmować parametry (wartości wejściowe) i zwracać wartości:

function obliczPole(dlugosc, szerokosc) {
    const pole = dlugosc * szerokosc;
    return pole;
}

const wynik = obliczPole(5, 3); // 15

Parametry domyślne

Możesz ustawić domyślne wartości parametrów:

function powitanie(imie = "Użytkowniku") {
    return "Witaj, " + imie + "!";
}

console.log(powitanie()); // Witaj, Użytkowniku!
console.log(powitanie("Maria")); // Witaj, Maria!

Funkcje wyższego rzędu

JavaScript pozwala na przekazywanie funkcji jako argumentów do innych funkcji:

function wykonajOperacje(a, b, operacja) {
    return operacja(a, b);
}

const dodaj = (x, y) => x + y;
const pomnoz = (x, y) => x * y;

console.log(wykonajOperacje(5, 3, dodaj)); // 8
console.log(wykonajOperacje(5, 3, pomnoz)); // 15

Callback functions

Funkcje callback to funkcje, które są wywoływane po zakończeniu określonej operacji:

function pobierzDane(callback) {
    setTimeout(() => {
        const dane = "Pobrane dane";
        callback(dane);
    }, 1000);
}

pobierzDane((dane) => {
    console.log(dane); // Pobrane dane (po 1 sekundzie)
});

Zasięg zmiennych (Scope)

Funkcje tworzą własny zasięg zmiennych:

let globalna = "Jestem globalna";

function mojaFunkcja() {
    let lokalna = "Jestem lokalna";
    console.log(globalna); // Dostęp do zmiennej globalnej
    console.log(lokalna);  // Dostęp do zmiennej lokalnej
}

mojaFunkcja();
// console.log(lokalna); // Błąd! Zmienna lokalna nie jest dostępna

Najlepsze praktyki

1. Używaj opisowych nazw - funkcja powinna jasno określać, co robi
2. Jedna funkcja = jedno zadanie - każda funkcja powinna mieć jeden cel
3. Unikaj długich funkcji - lepiej podzielić na mniejsze części
4. Używaj return - zawsze zwracaj wartość, jeśli to możliwe
5. Dokumentuj funkcje - dodawaj komentarze wyjaśniające działanie

Podsumowanie

Funkcje są sercem programowania w JavaScript. Zrozumienie różnych sposobów ich definiowania i używania to klucz do pisania czystego i efektywnego kodu. Ćwicz różne typy funkcji i stopniowo poznawaj bardziej zaawansowane koncepcje.