Do deklarowania zmiennych w JavaScript możemy użyć słów kluczowych let i var . Jest jednak kilka różnic między let i var , które warto znać.

Let to słowo kluczowe wprowadzone do języka JavaScript w 2015 roku razem ze słowem kluczowym const , kiedy to ujrzała światło dzienne nowa wersja specyfikacji ECMAScript – ES6, rozpoznawalna także pod nazwą ECMAScript 2015.

Przed wprowadzeniem standardu ES6, aby zadeklarować nową zmienną dysponowaliśmy jedynie słowem kluczowym var.

Zakres blokowy

Najbardziej zauważalną różnicą między let i var jest ich zakres.

Przed specyfikacją ES6 w świecie JavaScript istniały jedynie dwa typy zakresów: lokalny i globalny.

W wersji ES5 zakres blokowy nie istniał:

var name = "Kasia";
if (name) {
    var name = "Anna";
    console.log(name); "Anna"
}
console.log(name); // "Anna"

Analizując podany powyżej przykład, można przypuszczać, że między nawiasami klamrowymi tworzymy nową zmienną . Tak naprawdę jedynie modyfikujemy istniejącą zmienną, zadeklarowaną przed instrukcją warunkową if. Wynika to z tego, że zmienne zadeklarowane słowem kluczowym var nie mają zakresu blokowego.

Specyfikacja ES6 wprowadziła wiele nowości, w tym zakres blokowy, od dawna dostępny w innych językach programowania. Zakres blokowy jest ograniczony do bloków kodu otoczonych nawiasami klamrowymi np. instrukcji warunkowych if, switch oraz pętli for, while.

let name = "Kasia";
if (name) {
    let name = "Anna";
    console.log(name); "Anna"
}
console.log(name); // "Kasia"

W podanym przykładzie są zadeklarowane dwie zmienne o nazwie name. Pierwsza zmienna jest zadeklarowana w zakresie globalnym, a druga w zakresie blokowym. Modyfikacja zmiennej z zakresu blokowego nie wpływa na wartość przechowywaną w zmiennej z zakresu globalnego.

Ponowna deklaracja let i var

Zmienne zadeklarowane słowem kluczowym let i var zachowują się inaczej, gdy chcemy je podobnie zadeklarować w obrębie tego samego zakresu.

W przypadku użycia słowa kluczowego var, nie ma żadnych ograniczeń dotyczących tego ile razy ta sama zmienna zostanie zadeklarowana w obrębie tego samego zakresu, nie zależnie czy jest to zakres lokalny, czy globalny.

var x = 1;
var x = 2;

Natomiast zmienna zadeklarowana za pomocą słowa kluczowego let nie może być podobnie zadeklarowana w obrębie tego samego zakresu.

let y = 3;
let y = 4; // SyntaxError: Identifier 'x' has already been declared

Ta sama zasada obowiązuje jeśli próbujemy zadeklarować nową zmienną przy pomocy słowa kluczowego let, jeśli taka zmienna została już zadeklarowaną słowem kluczowym var:

var z = 5;
let z = 15; // SyntaxError: Identifier 'z' has already been declared

a także, gdy odwrócimy kolejność:

let z = 15;
var z = 5; // SyntaxError: Identifier 'z' has already been declared

Hoisting

Kolejną różnicą między let i var jest hoisting, który występuje w przypadku zmiennych zadeklarowanych słowem kluczowym var. Hoisting umożliwia dostęp do zmiennej przed jej deklaracją. Jest to możliwe poprzez przeniesienie zmiennej na samą górę zakresu, w którym ta zmienna została zadeklarowana.

console.log(str); // undefined
var str = "abc";
console.log(str); "abc"

Powyższy przykład można zinterpretować następująco:

var str;
console.log(str); // undefined
str = "abc";
console.log(str); "abc"

W przypadku zmiennej zadeklarowanej słowem let, hoisting nie występuje. Tutaj mamy styczność z czymś takim co nazywa się temporal dead zone. Zmienna zadeklarowana słowem let, nie jest zainicjalizowana dopóki jej deklaracja nie zostanie wywołana. Próba dostępu do takiej zmiennej przed inicjalizacją kończy się błędem:

console.log(str); // ReferenceError: str is not defined
let str = "abc";
console.log(str); "abc"

Window

Ostatnią różnicą między let i var jest fakt, że zmienne zadeklarowane słowem var w zakresie globalnym są automatycznie dostępne jako parametr obiektu nadrzędnego window.

console.log(window.title); // undefined
var title = 'JavaScript';
console.log(window.title); // "JavaScript"

W przypadku zmiennych zadeklarowanych słowem kluczowym let, taka sytuacja nie ma miejsca.

console.log(window.title); // undefined
let title = 'JavaScript';
console.log(window.title); // undefined

Kompatybilność z przeglądarkami

ChromeMozillaInternet ExplorerEdgeSafariOperaNode.js
4944111410176.0.0

Podsumowanie

  • słowa kluczowe let i var służą do deklarowania zmiennych w JavaScript
  • let i const zostały wprowadzone w wersji EcmaScript 2015 (ES6)
  • zmienne zadeklarowane słowem kluczowym var mogą być przypisane do zakresu globalnego lub lokalnego
  • zmienne zadeklarowane słowem kluczowym let i const mają zakres blokowy
  • zmienne zadeklarowane słowem kluczowym var mogą być ponownie zadeklarowane, natomiast zmienne zadeklarowane słowem kluczowym let nie
  • hoisting występuje w przypadku zmiennych zadeklarowanych słowem kluczowym var, w przypadku zmiennych zadeklarowanych słowem let i const mamy styczność z czymś co nazywa się temporal dead zone
  • zmienne zadeklarowane słowem var w zakresie globalnym są automatycznie dostępne jako parametr obiektu nadrzędnego window, natomiast w przypadku zmiennych zadeklarowanych słowem let i const taka sytuacja nie występuje


1 Comment

Oskar Masłek · 16 stycznia 2020 at 14:38

Kilka rzeczy się dowiedziałem. Widzę, że nowy blog, także trzymam kciuki by dalej się kręciło 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *