Hoisting w JavaScript

Co to jest hoisting w JavaScript?

Hoisting to mechanizm JavaScript polegający na tym, że podczas przygotowania kodu do wykonania silnik języka rejestruje deklaracje zmiennych i funkcji w ich zakresie. W uproszczeniu mówi się, że deklaracje są „przenoszone na górę zakresu”, ale fizycznie kod nie jest przepisywany.

Hoisting funkcji

Deklaracje funkcji są hoistowane w całości, dlatego można wywołać funkcję przed miejscem jej zapisania w kodzie:

przywitaj();

function przywitaj() {
  console.log("Cześć");
}

Taki kod zadziała poprawnie, ponieważ deklaracja funkcji została zarejestrowana przed wykonaniem instrukcji.

Hoisting zmiennych var

Deklaracje zmiennych utworzonych przez var są hoistowane, ale ich wartość nie. Zmienna istnieje od początku zakresu, jednak do momentu przypisania ma wartość undefined.

console.log(x); // undefined
var x = 10;
console.log(x); // 10

Silnik traktuje to podobnie do:

var x;
console.log(x);
x = 10;

let i const

Zmienne deklarowane przez let i const również są znane w swoim zakresie, ale nie można ich użyć przed deklaracją. Znajdują się wtedy w tzw. temporal dead zone.

console.log(y); // ReferenceError
let y = 5;

Najważniejsze na egzamin

Hoisting oznacza przenoszenie deklaracji zmiennych i funkcji na górę ich zakresu podczas fazy przygotowania/kompilacji kodu. Nie jest to garbage collection, optymalizacja kodu ani sposób ładowania skryptów.