[JS] ECMAScript 6 – jaka jest różnica między var i let?

Nowy standard pisania kodu JavaScript, ECMAScript 6 - wprowadzony już jakiś czas temu, do tej pory nie jest jeszcze dobrze rozumiany przez webdeveloperów. Wprowadza dużo ciekawych zmian, między innymi konstrukcję let, która jest odpowiedzialna za deklarację zmiennych.

Powstał bardziej aktualny wpis dotyczący let i const: jak używać let i const w JavaScript?

Sekcja 1Różnica między let i var

Zasadniczo, różnica sprowadza się zasięgu w jakim zadeklarowana zmienna działa.

var

Zmienne zadeklarowane za pomocą var działają w kontekście funkcji.

let

Deklaracja zmiennej za pomocą let sprawia, że zmienna działa w kontekście blokowym, np. wewnątrz pętli.

Jeśli definicje powyżej niewiele Ci mówią, to postaram się to znacznie bardziej przybliżyć za pomocą przykładów poniżej.

Sekcja 2Zmienne o zasięgu funkcyjnym

(function () {
  var letter = 'A';
  
  if (letter.length) {
    console.log(letter); // zwraca A
    var letter = 'B';
    console.log(letter); // zwraca B
  }
  
  console.log(letter); // zwraca B
})();

W powyższym przykładzie, zmienna letter na początku przyjmuje wartość A, następnie w instrukcji warunkowej if od nowa definiujemy zmienną letter i ustawiamy jej wartość na B. Wygląda to tak jakbyśmy od nowa deklarowali zmienną letter, ale tak naprawdę tylko modyfikujemy jej wartość. Nowa wartość zmiennej będzie widoczna w całej funkcji, dlatego przy drugim wywołaniu console.log() zmienna ma dalej wartość B.
Takie zachowanie zmiennych świadczy o zasięgu funkcyjnym.

Sekcja 3Zmienne o zasięgu blokowym

(function () {
  let letter = 'A';
  
  if (letter.length) {
    console.log(letter); // zwraca undefined
    let letter = 'B';
    console.log(letter); // zwraca B
  }
  
  console.log(letter); // zwraca A
})();

Przykład powyżej demonstruje działanie konstrukcji let. Jak można zauważyć, najpierw zdefiniowaliśmy zmienną letter i nadaliśmy jej wartość A. Następnie w if od nowa definujemy zmienną letter i nadajemy jej wartość B. Jak można zauważyć console.log() w każdym bloku zwraca inną wartość. Wartość zmiennej w instrukcji if nie nadpisuje wartości zmiennej zdeklarowanej wcześniej, w bloku wyżej.
Takie zachowanie demonstruje główną różnicę w działaniu konstrukcji let i var.

Sekcja 4Działanie var i let jednocześnie

Nic nie stoi na przeszkodzie, aby wykorzystać obydwie konstrukcje jednocześnie w tym samym kawałku kodu.

1
2
3
4
5
6
7
8
9
10
11

(function () {
  var letter = 'A';
 
  if (letter.length) {
    console.log(letter); // zwraca A
    let letter = 'B';
    console.log(letter); // zwraca B
  }
 
  console.log(letter); // zwraca A
})();

Jak widać, działanie obydwu wersji zmiennej pozostało niezakłócone. Zmienna zadeklarowana za pomocą var, zachowuje swoją wartość w zasięgu całej funkcji, a zmienna zadeklarowana za pomocą let przyjmuje nową wartość tylko w zasięgu wybranego bloku (między klamrami). Dzięki temu można tworzyć tymczasowe zmienne, niezależne od wartości zmiennych w szerszym kontekście.

Sekcja 5Podsumowanie

Mam nadzieję, że udało mi się wyjaśnić w sposób przejrzysty różnicę między let i var, dzięki czemu będziesz mógł w sposób pełni świadomy korzystać z możliwości takiej deklaracji zmiennych.

Różnica między let i var

Różnica polega na różnym zasięgu działania tak zadeklarowanej zmiennej. Konstrukcja var działa w kontekście funkcji, a let w kontekście bloku kodu.

Nowy standard JavaScript daje niesamowite możliwości zarządzania swoim kodem oraz możliwość ograniczenia liczby tworzonych zmiennych potrzebnych do działania zastosowanych mechanizmów. Niestety, w chwili obecnej stosowanie nowego standardu ECMAScript 6, w kodzie pisanym na potrzeby przeglądarek internetowych, nie ma sensu. Natomiast, jeśli piszesz kod dla platformy node.js, to jak najbardziej możesz zacząć korzystać z dobrodziejstw tego standardu.