Hoisting w JavaScript

Hoisting, czyli wynoszenie, to zachowanie JavaScript, które polega na przenoszeniu deklaracji zmiennych i funkcji na początek zakresu przed wykonaniem kodu. W praktyce oznacza to, że zmienne i funkcje można używać przed ich deklaracją w kodzie. Jest to możliwe, ponieważ JavaScript podczas fazy kompilacji przesuwa wszystkie deklaracje zmiennych (z var) i deklaracje funkcji na początek zakresu. Warto jednak pamiętać, że hoisting zachowuje się inaczej dla zmiennych zadeklarowanych za pomocą let i const.

Przykłady hoistingu

Poniżej znajduje się kompletny plik HTML z kodem JavaScript ilustrującym różne przypadki hoistingu.

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

    <script>
        // Przykład 1: Hoisting funkcji
        console.log(sum(5, 3)); // Wywołanie funkcji przed jej deklaracją
        function sum(a, b) {
            return a + b; // Funkcja jest dostępna dzięki hoistingu
        }

        // Przykład 2: Hoisting zmiennych zadeklarowanych za pomocą 'var'
        console.log(number); // undefined, ale nie ma błędu referencji
        var number = 10; // Zmienna 'number' jest hoistowana, ale jej wartość nie

        // Przykład 3: Hoisting zmiennych zadeklarowanych za pomocą 'let' i 'const'
        // console.log(anotherNumber); // Błąd referencji, 'anotherNumber' nie jest dostępna
        let anotherNumber = 20; // Zmienna 'anotherNumber' nie jest hoistowana

        // Przykład 4: Hoisting w kontekście bloku
        if (true) {
            // console.log(blockScoped); // Błąd referencji, 'blockScoped' nie jest dostępna
            const blockScoped = "jestem w bloku"; // 'const' i 'let' mają zakres blokowy
        }
    </script>
</body>
</html>

Opis przykładów

  • Przykład 1 pokazuje, że funkcje są w pełni hoistowane, co pozwala na ich wywoływanie przed fizyczną deklaracją w kodzie.
  • Przykład 2 ilustruje, jak zmienna deklarowana za pomocą var jest hoistowana. Dostępna jest jako undefined przed przypisaniem jej wartości.
  • Przykład 3 demonstruje, że zmienne deklarowane za pomocą let i const także podlegają hoistingowi, ale nie są dostępne przed deklaracją w kodzie. Dostęp do nich przed ich deklaracją skutkuje błędem referencji.
  • Przykład 4 wskazuje, że hoisting działa również w zakresie blokowym, ale zmienne z let i const nie są dostępne przed deklaracją wewnątrz bloku.

Podsumowanie

Hoisting jest unikalną cechą JavaScript, która pozwala na większą elastyczność w pisaniu kodu. Jednak wymaga to także dokładnego zrozumienia, jak i kiedy można bezpiecznie korzystać z hoistowanego kodu, zwłaszcza przy używaniu let i const, które mają inne zachowanie niż var. Zrozumienie hoistingu pomaga unikać błędów związanych z niezdefiniowanymi zmiennymi i pozwala pisać bardziej przewidywalny oraz czytelny kod.

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