Funkcje strzałkowe

Funkcje strzałkowe (arrow functions) w JavaScript to kompaktowy sposób deklarowania funkcji. Zostały wprowadzone w ES6 (ECMAScript 2015) i oferują krótszą składnię w porównaniu do tradycyjnych funkcji. Funkcje strzałkowe są szczególnie użyteczne dla anonimowych funkcji i zmieniają sposób, w jaki this jest wiązane wewnątrz funkcji.

W tej lekcji przejrzymy różne przypadki użycia funkcji strzałkowych, pokazując, jak mogą one upraszczać kod JavaScript.

Przykłady użycia funkcji strzałkowych

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funkcje strzałkowe w JavaScript</title>
</head>
<body>
    <h3>Przykłady funkcji strzałkowych</h3>

    <script>
        // Przykład 1: Podstawowa składnia funkcji strzałkowej
        // Tradycyjna funkcja
        const squareTraditional = function(x) {
            return x * x;
        };
        // Funkcja strzałkowa
        const squareArrow = (x) => x * x;
        
        console.log(squareTraditional(5)); // 25
        console.log(squareArrow(5)); // 25
        
        // Przykład 2: Funkcja strzałkowa bez argumentów
        const sayHello = () => console.log('Hello!');
        sayHello(); // Wyświetla "Hello!"
        
        // Przykład 3: Funkcja strzałkowa z wieloma argumentami
        const add = (a, b) => a + b;
        console.log(add(2, 3)); // 5
        
        // Przykład 4: Funkcja strzałkowa z ciałem funkcji
        const multiply = (a, b) => {
            let result = a * b;
            return result;
        };
        console.log(multiply(2, 4)); // 8

        // Przykład 5: Zwracanie obiektu przez funkcję strzałkową
        const getCar = () => ({
            brand: "Ford",
            model: "Mustang",
            year: 1969
        });
        console.log(getCar()); // { brand: "Ford", model: "Mustang", year: 1969 }

        // Przykład 6: Funkcje strzałkowe jako argumenty innych funkcji
        const numbers = [1, 2, 3, 4, 5];
        const doubled = numbers.map(number => number * 2);
        console.log(doubled); // [2, 4, 6, 8, 10]
    </script>
</body>
</html>

Podsumowanie

Funkcje strzałkowe w JavaScript to potężne narzędzie, które pozwala na zwięzłe i wygodne deklarowanie funkcji. Ich unikalna cecha, tak jak brak własnego kontekstu this, czyni je idealnym wyborem dla pewnych przypadków użycia, takich jak funkcje callback w metodach tablicowych czy przy obsłudze zdarzeń. Pamiętając o ich ograniczeniach i właściwościach, możemy skutecznie wykorzystać funkcje strzałkowe do tworzenia bardziej czytelnego i zorganizowanego kodu JavaScript.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top