Let vs var w JavaScript

Witam w kolejnym artykule, dzisiaj przedstawię różnicę pomiędzy deklarowaniem zmiennych za pomocą słów kluczowych let oraz var. Na początek przypomnę Ci, że słowa kluczowe let wraz z const zostały wprowadzone w ES6. Za pomocą let możesz deklarować zmienne, a za pomocą const stałe i takie podejście jest zalecane. Przed ES6 zarówno zmienne jak i stałe były deklarowane za pomocą słowa var, o czym pisałem już wcześniej na blogu. Dzisiaj jednak zagłębimy się w szczegóły różnic pomiędzy tymi słowami.

Zmienne zadeklarowana za pomocą słowa let i const mają zakres blokowy, natomiast za pomocą var zakres funkcyjny. Co to znaczy? Przeanalizujmy 2 przykłady, 1 z użyciem let, a 2 z użyciem var. Zacznijmy od let:

function testLet() {
    for (let i = 0; i < 3; i++) {
        console.log(i);
    }

    console.log(i);
}
testLet(); //ReferenceError: i is not defined

Przykład powyżej jest Ci znany z poprzedniego artykułu, gdzie pisałem o zakresach zmiennych i stałych. Zmienna "i" została zadeklarowana w pętli for za pomocą słowa let, oznacza to, że jest widoczna tylko w zakresie lokalnym, czyli w bloku pętli. Nie jest widoczna poza tym blokiem. Zobaczmy na ten sam przykład z użyciem var'a:

function testVar() {
    for (var i = 0; i < 3; i++) {
        console.log(i);
    }

    console.log(i);
}
testVar(); 
//0
//1
//2
//3

Jak widzisz tym razem zmienna "i" zadeklarowana za pomocą słowa var jest widoczna również poza blokiem pętli for, ma zasięg funkcyjny. To jest właśnie problem var'a że jej zakres jest widoczny również poza blokiem gdzie został zadeklarowany, jest ograniczona zakresem funkcji. Nie jest to typowe zachowanie, w innych językach programowania coś takiego nie występuje, dlatego został wprowadzony standard ES6, dzięki któremu możemy deklarować zmienne oraz stałe kolejno za pomocą słów let oraz const.

Zobacz na kolejny dziwny przykład z wykorzystaniem słowa var:

function testVar() {
    for (var i = 0; i < 3; i++) {
        if (true) {
            var course = 'JavaScript';
        }
        console.log(i);
    }

    console.log(course);
}
testVar(); 
//0
//1
//2
//JavaScript

Kolejne dziwne zachowanie zmiennej zadeklarowanej za pomocą var, napisałem dziwne ponieważ takie zachowanie nie występuje w żadnych innych językach programowania. Mimo, że zadeklarowaliśmy zmienną course wewnątrz instrukcji warunkowej if, ta zmienna jest widoczna w obrębie całej funkcji testVar(). Oczywiście, jeżeli użyłbyś w tym przykładzie deklaracji course za pomocą słowa let, wówczas ta zmienna nie byłaby widoczna poza blokiem instrukcji warunkowej, ale o tym na pewno już wiesz z poprzedniego mojego artykułu :) W taki sposób wygląda to również w innych językach programowania takich jaki np. C#, C++ czy Java.

Kolejnym dużym problemem w przypadku deklaracji zmiennych globalnych za pomocą var jest nadpisywanie właściwości obiektu nadrzędnego window.

console.log(window.length); //0
var length = 'JavaScript';
console.log(window.length); //JavaScript

Po deklaracji zmiennej length za pomocą var, została nadpisana właściwość length obiektu nadrzędnego window. Zazwyczaj takie zachowanie nie jest pożądane.

console.log(window.length); //0
let length = 'JavaScript';
console.log(window.length); //0

Jak widzisz w przypadku zastosowania słowa kluczowego let, taka sytuacja jak wyżej nie ma miejsca. Odwołując się do właściwości lenght obiektu window otrzymujemy prawidłową, niezmienioną wartość.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Zakres lokalny vs zakres globalny w JavaScript.
Następny artykuł - Obsługiwanie wyjątków w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły