Что такое hoisting в JavaScript?

Что такое hoisting

Hoisting (поднятие) — это поведение движка JavaScript, при котором объявления (declarations) переменных, функций и классов обрабатываются до выполнения кода. Технически никакого физического «перемещения» строк не происходит: на этапе создания контекста выполнения движок проходит по коду и резервирует место в памяти для всех объявлений, а затем уже исполняет код построчно.

Именно поэтому к функции, объявленной через function, можно обратиться до её определения в исходном коде, а обращение к var-переменной до её объявления вернёт undefined, а не ошибку.

Как поднимаются разные сущности

var

Переменные, объявленные через var, поднимаются и инициализируются значением undefined. Поэтому обращение до объявления не выбрасывает ошибку.

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

Движок интерпретирует это примерно так:

var x; // объявление поднято и инициализировано как undefined
console.log(x);
x = 5;
console.log(x);

let и const

Объявления let и const также поднимаются, но не инициализируются. Переменная попадает во «временную мёртвую зону» (Temporal Dead Zone, TDZ) — от начала блока до строки объявления. Обращение к ней в этот момент вызывает ReferenceError.

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

Function Declaration

Функциональные объявления поднимаются вместе с телом, поэтому их можно вызывать выше по коду.

greet(); // "Привет"

function greet() {
  console.log("Привет");
}

Function Expression и стрелочные функции

Функции, присвоенные переменной, подчиняются правилам этой переменной (var, let, const).

sayHi(); // TypeError: sayHi is not a function
var sayHi = function () {
  console.log("Hi");
};

Здесь поднимается только объявление var sayHi, а присвоение функции остаётся на своём месте.

class

Классы тоже поднимаются, но, как let/const, находятся в TDZ до момента объявления.

new User(); // ReferenceError
class User {}

Области видимости и hoisting

Важно понимать, что var имеет функциональную область видимости, а let и const — блочную. Поэтому поднятие var происходит до начала функции, а let/const — до начала ближайшего блока { ... }.

function demo() {
  console.log(a); // undefined
  if (true) {
    var a = 1;
    let b = 2;
  }
  console.log(a); // 1
  // console.log(b); // ReferenceError
}

Зачем это знать на практике

Понимание hoisting помогает избегать неочевидных багов: обращений к переменной до её инициализации, конфликтов имён, неожиданного undefined вместо ожидаемого значения. Современный стиль — использовать let и const, объявлять переменные как можно ближе к месту использования и не полагаться на поднятие var.