Funkcje: deklaracje, wyrażenia i funkcje strzałkowe
Definiuj funkcje na trzy sposoby, poznaj hoisting, używaj parametrów i wartości zwracanych oraz pisz zwięzłe funkcje strzałkowe.
Funkcje: deklaracje, wyrażenia i funkcje strzałkowe to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są funkcje?
Funkcje to wielokrotnego użytku bloki kodu. Przyjmują dane wejściowe (parametry), wykonują logikę i opcjonalnie zwracają wynik. Funkcje są w JavaScript wartościami pierwszej klasy — można przypisywać je do zmiennych, przekazywać jako argumenty i zwracać z innych funkcji.
Deklaracje funkcji
Deklaracja funkcji tworzy nazwaną funkcję za pomocą słowa kluczowego function. Deklaracje są hoistowane — można je wywołać przed miejscem, w którym pojawiają się w kodzie.
function greet(name) {
return `Hello, ${name}!`;
}
// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'Wyrażenia funkcyjne
Wyrażenie funkcyjne przypisuje funkcję do zmiennej. Nie jest hoistowane (zmienna jest hoistowana jako undefined). Wyrażenia funkcyjne mogą być anonimowe lub nazwane.
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 4)); // 12
// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};Funkcje strzałkowe
Funkcje strzałkowe to zwięzła składnia wprowadzona w ES6. Nie mają własnego this — dziedziczą this z otaczającego zakresu. Świetnie nadają się do funkcji zwrotnych i krótkich funkcji.
// Standard arrow:
const add = (a, b) => a + b;
// Single parameter (no parens needed):
const double = n => n * 2;
// No parameters:
const greet = () => 'Hello!';
// Multi-line body needs {} and return:
const process = (x) => {
const result = x * 2;
return result + 1;
};Parametry i argumenty
Parametry to nazwy wymienione w definicji funkcji. Argumenty to wartości przekazywane podczas wywoływania funkcji. Nadmiarowe argumenty są ignorowane, a brakujące argumenty mają wartość undefined.
function info(name, age) {
console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob'); // 'Bob is undefined'Parametry domyślne
ES6 umożliwia ustawianie wartości domyślnych parametrów. Wartość domyślna jest używana, gdy argument ma wartość undefined (również wtedy, gdy nie został w ogóle przekazany).
function greet(name = 'World') {
return `Hello, ${name}!`;
}
console.log(greet()); // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'Instrukcja return
Funkcje domyślnie zwracają undefined. Użyj return, aby zwrócić wartość. Funkcja kończy działanie przy pierwszym napotkanym return — dalszy kod nie jest wykonywany.
function divide(a, b) {
if (b === 0) return null; // early return
return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // nullParametry rest
Parametr rest ...args zbiera wszystkie pozostałe argumenty do tablicy. Musi być ostatnim parametrem. W nowoczesnym kodzie zastępuje stary obiekt arguments.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Funkcje jako wartości (first-class)
Funkcje można przechowywać w zmiennych, przekazywać do innych funkcji jako argumenty (callbacki) oraz zwracać z funkcji. Umożliwia to stosowanie zaawansowanych wzorców, takich jak metody tablic i nasłuchiwanie zdarzeń.
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]Funkcje czyste
Funkcja czysta zwraca ten sam wynik dla tych samych danych wejściowych i nie powoduje skutków ubocznych (nie zmienia DOM, nie wykonuje żądań sieciowych ani nie modyfikuje zmiennych globalnych). Funkcje czyste są łatwe do testowania, debugowania i analizowania.
// Pure:
const add = (a, b) => a + b;
// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }Natychmiast wywoływane wyrażenia funkcyjne (IIFE)
IIFE uruchamia się natychmiast po zdefiniowaniu. Historycznie używano go do tworzenia prywatnego zakresu. Obecnie jest mniej potrzebne dzięki modułom i zakresowi blokowemu, ale nadal można je spotkać w starszych bazach kodu.
(function () {
const secret = 'hidden';
console.log('IIFE ran');
})();
// secret is not accessible hereSzybkie sprawdzenie
Które z poniższych stwierdzeń dotyczących funkcji strzałkowych jest prawdziwe?
Podsumowanie: funkcje JavaScript
Deklaracje funkcji są hoistowane. Wyrażenia funkcyjne i funkcje strzałkowe nie są. Funkcje strzałkowe są zwięzłe i nie mają własnego this. Używaj parametrów domyślnych do obsługi brakujących argumentów. Funkcje są wartościami pierwszej klasy — można je swobodnie przekazywać.
Często zadawane pytania
Czy lekcja „Funkcje: deklaracje, wyrażenia i funkcje strzałkowe” jest bezpłatna?
Tak — pełny tekst „Funkcje: deklaracje, wyrażenia i funkcje strzałkowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Funkcje: deklaracje, wyrażenia i funkcje strzałkowe”?
Definiuj funkcje na trzy sposoby, poznaj hoisting, używaj parametrów i wartości zwracanych oraz pisz zwięzłe funkcje strzałkowe. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Funkcje: deklaracje, wyrażenia i funkcje strzałkowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zmienne: let, const, var i zakres
- Typy danych: string, number, boolean, null, undefined
- Funkcje: deklaracje, wyrażenia i funkcje strzałkowe
- Sterowanie przepływem: if, else, switch, for, while