Jaka jest różnica między let a var w JavaScript?

By /

JavaScript

W JavaScript, deklaracje zmiennych mogą być dokonywane przy użyciu var, let oraz const. Chociaż var była stosowana przez wiele lat, ES6 (ECMAScript 2015) wprowadziło let i const, oferując bardziej elastyczne i bezpieczne sposoby deklarowania zmiennych. Kluczowe różnice między let a var dotyczą zakresu działania (scope), podnoszenia (hoisting) oraz tworzenia bloku kodu.

Przykład z var i let

Aby zilustrować różnice, przygotujmy prosty kod HTML i JavaScript, który pokaże, jak var i let zachowują się w różnych kontekstach.

<!DOCTYPE html>
<html>
<head>
    <title>Różnica między let a var</title>
</head>
<body>
    <script>
        // Przykład z użyciem var
        var x = 1;
        if (true) {
            var x = 2; // x tutaj nadpisuje x z zewnątrz bloku
            console.log("Wewnątrz bloku z var: ", x); // Wyświetla 2
        }
        console.log("Na zewnątrz bloku z var: ", x); // Wyświetla również 2

        // Przykład z użyciem let
        let y = 1;
        if (true) {
            let y = 2; // y tutaj jest nową zmienną, niezależną 
                       // od y z zewnątrz bloku
            console.log("Wewnątrz bloku z let: ", y); // Wyświetla 2
        }
        console.log("Na zewnątrz bloku z let: ", y); // Wyświetla 1
    </script>
</body>
</html>

Różnice w szczegółach

  1. Zakres działania (scope):
    • var ma zakres funkcji (function scope), co oznacza, że zmienna zadeklarowana za pomocą var jest dostępna w całej funkcji, w której została zdefiniowana, oraz w mniejszych zakresach wewnątrz tej funkcji.
    • let ma zakres blokowy (block scope), co oznacza, że jest dostępna tylko w bloku, w którym została zadeklarowana, np. w pętli lub instrukcji warunkowej.
  2. Hoisting:
    • Zmienne zadeklarowane za pomocą var są “podnoszone” na górę funkcji lub skryptu (ich deklaracja jest przenoszona na początek zakresu, ale nie inicjalizacja).
    • let również podlega hoistingowi, ale w przeciwieństwie do var, nie jest inicjalizowana do momentu jej deklaracji. Oznacza to, że dostęp do zmiennej let przed jej deklaracją spowoduje błąd ReferenceError.
  3. Tworzenie bloku kodu:
    • Zmienne zadeklarowane przez let mogą być użyte do definiowania zmiennych w bloku kodu, co pomaga uniknąć problemów związanych z nadpisaniem wartości w przypadku złożonych funkcji i operacji logicznych.

Podsumowanie

Różnica między let a var ma kluczowe znaczenie dla pisania czystego i przewidywalnego kodu w JavaScript. Użycie let zamiast var może pomóc w uniknięciu wielu błędów związanych z zakresem zmiennych, szczególnie w dużych i złożonych aplikacjach. Zrozumienie tych różnic jest fundamentalne dla nowoczesnego programowania w JavaScript.

 

 

 

Powiązane artykuły

Scroll to Top