Autor: Codenga 07.06.2023

W języku JavaScript, zmienne można deklarować za pomocą słów kluczowych var oraz let. Każdy z tych sposobów wiąże się z konkretnymi konsekwencjami. Więcej dowiesz się po przeczytaniu tego artykułu.

Deklaracja zmiennej var oraz hoisting

Popatrz na ten ciekawy przykład kodu:

console.log(a);
var a =  1;

Zauważ, że najpierw próbujemy odwołać się do zmiennej i dopiero w linii poniżej tą zmienną deklarujemy! Jak myślisz, co się stanie?

undefined

Mamy wynik undefined czyli dosłownie “wartość nie zdefiniowana”. JavaScript jest pod tym względem wyjątkowy. W wielu innych językach w takiej sytuacji pojawiłby się błąd i program zostałyby przerwany.

To zjawisko z naszego przykładu, w JavaScript określamy jako hoisting (“windowanie”). W praktyce oznacza to, że deklaracje są przenoszone (windowane) automatycznie na samą górę zakresu. Dlatego JavaScript “wie” o naszej zmiennej a, pomimo tego, że została ona zadeklarowana poniżej miejsca, w którym ją wywołujemy.

Teraz ten sam przykład z użyciem deklaracji let:

console.log(a);
let a = 1;

Tym razem mamy inny wynik:

ReferenceError: a is not defined

Błąd referencji czyli JavaScript nie wie nic o naszej zmiennej a. Jak łatwo się można domyśleć hoisting nie występuje (a przynajmniej nie w bezpośredni sposób) w przypadku zmiennych zadeklarowanych za pomocą let.

W praktyce najlepiej jest wyraźnie zadeklarować zmienne na górze, przed ich wywołaniem, niezależnie od tego czy używasz let albo var.

Hoisting (windowanie) - sięgnijmy głębiej

Wróćmy do ważnej kwestii:

console.log(a)
var a = 1;

Dlaczego po wykonaniu powyższego kodu mamy wartość undefined?

JavaScript stosuje hoisting dla deklaracji zmiennej ale nie używa go dla przypisania wartości! Czyli w naszym przykładzie na górę wyciągana jest tylko deklaracja var a. Natomiast przypisanie wartości czyli a = 1 pozostaje na swoim miejscu. Dlatego w linii pierwszej, gdy próbujemy odwołać się do zmiennej a, ma ona wartość niezdefiniowaną (undefined). Dopiero w linii poniżej jest do niej przypisywana wartość 1.

Nasz kod można by też zapisać w taki sposób:

console.log(a)
var a;
a = 1;

Wynik byłby dokładnie taki sam czyli undefined.

Zasięg zmiennych - kolejny element układanki

Możemy powiedzieć, że zmienne mogą być globalne oraz lokalne. Zmienna globalna to taka, która jest dostępna w każdym miejscu. Załóżmy, że na górze pliku z kodem mamy taką deklarację:

let a = 1;

Z takiej zmiennej może korzystać dowolny fragment naszego programu. Wydawałoby się, że jest to idealne rozwiązanie ale w praktyce tak nie jest. Dlaczego?

Skoro każdy fragment programu ma dostęp do takiej globalnej zmiennej to może ją dowolnie modyfikować - a to już jest prosta droga do pojawienia się nieprzewidzianych błędów. Im bardziej rozbudowany program piszesz, tym większe ryzyko, że wartości globalnych zmiennych zostaną zmodyfikowane w trudny do przewidzenia sposób.

Rozwiązanie problemu

Dlatego w praktyce często używamy zmiennych, które są zamknięte w jakimś zasięgu. To dobry pomysł bo dzięki temu mamy pewność, że inne fragmenty kodu nie wpłyną negatywnie na działanie naszej funkcji i nie zmodyfikują w nieprzewidziany sposób wartości naszej zmiennej.

Zmienna var ma zasięg albo globalny albo zasięg funkcji. Natomiast zmienna let ma zasięg albo globalny albo zasięg bloku.

Czym jest blok? To może być dowolny fragment kodu otoczony nawiasami klamrowymi.

Popatrz na przykład:

for (let i = 0; i <= 5; i++) {
    console.log(i);
}
console.log(i);

Ten kod skutkuje pojawieniem się dobrze znanego błędu ReferenceError. Zmienna i zadeklarowana jest za pomocą let, więc jej zasięg jest ograniczony do bloku pętli. Poza blokiem pętli nie można się do tej zmiennej odwołać!

Tutaj mamy taką samą pętlę ale zmienna i tym razem zadeklarowana jest za pomocą var:

for (var i = 0; i <= 5; i++) {
    console.log(i);
}
console.log(i);

W tym wypadku można się odwołać do zmiennej poza blokiem pętli. To jest właśnie kolejna różnica pomiędzy let oraz var.

Zmienne zadeklarowane za pomocą let to nowsze podejście niż użycie var. Ich zaletą jest to, że mają zasięg ograniczony do bloku i dzięki temu mamy mniejsze ryzyko przypadkowego nadpisania wartości.

Opanuj najważniejszy język współczesnej sieci Web. Zdobądź umiejętności niezbędne aby zostać front-end developerem.

Dowiedz się więcej

Podsumowanie

Każdy programista JavaScript powinien wiedzieć, jakie są różnice pomiędzy deklaracjami var oraz let. Ta wiedza jest kluczowa w codziennej pracy. Trzeba też dobrze zrozumieć istotę windowania zmiennych a także bardzo ważną koncepcję zasięgu.

Jeśli dobrze poznać język JavaScript i zdobyć umiejętności potrzebne do pracy na stanowisku JavaScript Developer, to zacznij naukę ze Ścieżką Kariery. Nauka kończy się egzaminem, który uprawnia cię do posługiwania się Certyfikatem Specjalisty.