let, const i var w JavaScript: zakres, hoisting i kiedy czego używać

Trzy słowa kluczowe, jedno zadanie

JavaScript ma trzy sposoby deklarowania zmiennej: var, let i const. Wszystkie wiążą nazwę z wartością, ale różnią się zakresem, zasadami ponownego przypisania i zachowaniem przed wykonaniem deklaracji. Nowoczesny kod przez większość czasu używa const, let wtedy, gdy wartość musi się zmieniać, a var rzadko albo wcale.

W skrócie:

const pi = 3.14159;      // can't be reassigned
let count = 0;           // can be reassigned
var legacy = "old school"; // works, but avoid

count = count + 1;
console.log(pi, count, legacy);

Reszta tej strony wyjaśnia, dlaczego te trzy linie zachowują się tak, a nie inaczej.

const: domyślny wybór

const tworzy wiązanie, którego nie można ponownie przypisać. Gdy napiszesz const x = 5, nie możesz później napisać x = 6, bo silnik rzuci TypeError.

const rate = 0.08;
console.log(rate);

// rate = 0.09;   // TypeError: Assignment to constant variable.

To cała zasada. Ponieważ większości zmiennych w dobrze napisanym programie nie trzeba przypisywać ponownie, const pasuje do zdecydowanej większości przypadków. Gdy domyślnie sięgasz po const, miejsca, w których wartość faktycznie się zmienia, od razu rzucają się w oczy.

Częste źródło nieporozumień: const chroni wiązanie, a nie wartość. Jeśli wartością jest obiekt lub tablica, jej zawartość nadal można zmieniać:

const user = { name: "Ada" };
user.name = "Boris";         // fine - mutating the object
user.role = "admin";         // fine - adding a property
console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the binding

const oznacza „ta nazwa zawsze wskazuje na ten obiekt”. Nie oznacza „ten obiekt nigdy się nie zmieni”. Jeśli sam obiekt ma być zamrożony, służy do tego Object.freeze(user), choć w praktyce większość kodu po prostu opiera się na konwencji, że obiektów const się nie modyfikuje.

let: gdy naprawdę musisz przypisać ponownie

let pod każdym względem jest taki sam jak const, poza tym, że można go ponownie przypisać. Używaj go do liczników, akumulatorów, zmiennych pętli i wszędzie tam, gdzie wartość faktycznie zmienia się w czasie.

let attempts = 0;
while (attempts < 3) {
    attempts += 1;
    console.log("attempt", attempts);
}

Jeśli piszesz let i nigdy nie przypisujesz zmiennej ponownie, zmień ją na const. W większości projektów linter sam ci to podpowie.

Zakres blokowy

Zarówno let, jak i const mają zakres blokowy. Blok to wszystko między { a }: ciało if, for, funkcji, a nawet samodzielny blok { ... }. Zmienna zadeklarowana w bloku nie istnieje poza nim.

if (true) {
    const message = "hello from inside";
    console.log(message);
}

// console.log(message);  // ReferenceError: message is not defined

Właśnie tego chcesz. Zmienne pozostają przypisane do zadania, do którego należą, a przypadkowe kolizje nazw stają się niemożliwe.

var tak nie działa i to główny powód, by go unikać.

var: zakres funkcyjny i niespodzianki

var ma zakres najbliższej funkcji, a nie najbliższego bloku. Oznacza to, że var zadeklarowany w if lub for wycieka do otaczającej funkcji:

function demo() {
    if (true) {
        var leaked = "I escaped";
        let contained = "I did not";
    }
    console.log(leaked);       // "I escaped"
    // console.log(contained); // ReferenceError
}

demo();

Ten luźny zakres jest źródłem długiej listy klasycznych błędów w JavaScript. Najsłynniejszy to pętle, w których każda iteracja współdzieli to samo var i, a wszystkie callbacki widzą na koniec ostatnią wartość.

var pozwala też bez protestu ponownie zadeklarować tę samą nazwę w tym samym zakresie, co ukrywa literówki:

var count = 1;
var count = 2;   // silently fine with var
console.log(count);

let total = 1;
// let total = 2;   // SyntaxError: Identifier 'total' has already been declared

Nowoczesny kod używa niemal wyłącznie let i const. var pojawia się w starszych projektach, dawnych odpowiedziach na Stack Overflow i skryptach, które muszą działać w bardzo starych środowiskach.

Hoisting i temporal dead zone

Wszystkie trzy deklaracje podlegają hoistingowi: silnik wie o nich, zanim uruchomi kod w bloku. Różnią się jednak zachowaniem przed wykonaniem linii z deklaracją.

var jest hoistowany i inicjalizowany wartością undefined. Możesz się do niego odwołać przed linią z var bez błędu:

console.log(early);   // undefined - no error
var early = "hello";
console.log(early);   // "hello"

let i const są hoistowane, ale nie są inicjalizowane. Dotknięcie ich przed deklaracją rzuca błąd. Ten przedział między wejściem do zakresu a wykonaniem deklaracji nazywa się temporal dead zone (TDZ):

// console.log(planned);   // ReferenceError: Cannot access 'planned' before initialization
let planned = "hello";
console.log(planned);

TDZ to funkcja, a nie błąd. Zamienia „użyte przed deklaracją” z cichego undefined w głośny błąd, który wyłapuje mnóstwo literówek i pomyłek w kolejności.

const jako zmienna pętli for...of

Mały, ale częsty przypadek: pętle for...of tworzą świeże wiązanie w każdej iteracji, więc możesz użyć const dla zmiennej pętli, mimo że „zmienia się” ona między iteracjami.

const names = ["Ada", "Boris", "Rosa"];

for (const name of names) {
    console.log(name);
}

Każda iteracja dostaje własne wiązanie name, więc żadna pojedyncza zmienna nie jest ponownie przypisywana. Klasyczne for (let i = 0; i < n; i++) nadal wymaga let, bo i to jedno wiązanie, które jest zwiększane.

Praktyczna zasada

Wybieraj deklaracje w tej kolejności:

• const domyślnie. Jeśli wartość nie będzie ponownie przypisywana, pokaż to.
• let, gdy wiązanie naprawdę musi się zmieniać.
• var tylko w projekcie, który tego wymaga.

Stosowana konsekwentnie, ta zasada sprawia, że intencja każdej zmiennej jest oczywista na pierwszy rzut oka: czy da się ją przypisać ponownie i czy ma zakres bloku, czy funkcji.

const MAX_RETRIES = 3;
const users = ["Ada", "Boris", "Rosa"];

let successful = 0;
for (const user of users) {
    // pretend we tried to do something
    successful += 1;
}

console.log(`${successful}/${users.length} succeeded, up to ${MAX_RETRIES} retries`);

MAX_RETRIES i users nigdy się nie zmieniają, więc const. successful rośnie, więc let. user to świeże wiązanie w każdej iteracji, więc const. Czytając od góry do dołu, widzisz, które wartości się ruszają, a które nie, bez uruchamiania kodu.

Dalej: typy proste

Skoro umiesz już deklarować zmienne, następne pytanie brzmi: jakie wartości mogą przechowywać? JavaScript ma niewielki zestaw typów prostych (liczby, stringi, wartości logiczne i kilka innych), a każdy z nich ma swoje dziwactwa. O nich jest następna strona.