Przykład hoistingu (var, let, const) w JavaScript

Hoisting to mechanizm w JavaScript, który polega na „wynoszeniu” deklaracji zmiennych i funkcji na początek ich zakresu. Jednak sposób działania hoistingu różni się w zależności od tego, czy używasz var, let, czy const.
MS

Marcin Stawowczyk · @m7rlin

1 min czytania ·

Przykład z var

console.log(a); // undefined
var a = 5;
console.log(a); // 5

W tym przypadku deklaracja var a jest hoistowana na początek zakresu, ale przypisanie wartości (= 5) następuje dopiero w miejscu, gdzie zostało zapisane w kodzie. Dlatego pierwsze console.log(a) wypisze undefined.

Przykład z let

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

Zmienne zadeklarowane przez let również są hoistowane, ale nie są inicjalizowane. Przed linią deklaracji znajdują się w tzw. "martwej strefie czasowej" (temporal dead zone). Próba użycia takiej zmiennej przed deklaracją skutkuje błędem ReferenceError.

Przykład z const

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;

Dla const sytuacja jest identyczna jak dla let: zmienna jest hoistowana, ale nie można jej użyć przed deklaracją - również pojawi się ReferenceError.

Podsumowanie

  • var – deklaracja jest hoistowana, inicjalizacja nie; przed deklaracją zmienna ma wartość undefined.

  • let i const – deklaracja jest hoistowana, ale zmienna nie jest dostępna przed deklaracją (ReferenceError).

Znajomość tych różnic pozwala unikać trudnych do wykrycia błędów w kodzie JavaScript.