Как работает Hoisting относительно const?

Hoisting и const в JavaScript

Hoisting - это поведение JavaScript, при котором объявления переменных и функций перемещаются в начало их области видимости. Однако const работает по-другому, чем var и let.

Что такое Hoisting

JavaScript обрабатывает код в два этапа: компиляция и выполнение. На этапе компиляции все объявления переменных и функций "поднимаются" (hoisted) в начало области видимости.

// Как вы пишете
console.log(x); // Что будет?
var x = 5;

// Как JavaScript интерпретирует
var x; // объявление hoisted
console.log(x); // undefined
x = 5; // присвоение остается на месте

Hoisting для var

Переменные var полностью hoisted с инициализацией undefined.

console.log(age); // undefined (не ошибка!)
var age = 25;
console.log(age); // 25

// Это то же самое что:
var age;
console.log(age); // undefined
age = 25;
console.log(age); // 25

Hoisting для let и const

let и const тоже hoisted, но они НЕ инициализируются. Это называется Temporal Dead Zone (TDZ).

console.log(name); // ReferenceError: Cannot access name before initialization
const name = "John";

// const hoisted но НЕ инициализирована
// От начала блока до строки объявления - Temporal Dead Zone

Temporal Dead Zone (TDZ)

Это период от начала блока до строки, где переменная объявлена.

{
  console.log(value); // ReferenceError - в TDZ
  const value = 10;
  console.log(value); // 10 - теперь доступна
}

Различия между var, let, const

// var
console.log(varValue); // undefined - hoisted и инициализирован
var varValue = 1;

// let
console.log(letValue); // ReferenceError - в TDZ
let letValue = 2;

// const
console.log(constValue); // ReferenceError - в TDZ
const constValue = 3;

const и область видимости

const hoisted только в пределах своего блока (блочная область видимости).

function example() {
  if (true) {
    console.log(x); // ReferenceError - в TDZ блока if
    const x = 5;
  }
  console.log(x); // ReferenceError - x не существует в функции
}

Hoisting функций

Функции полностью hoisted вместе с телом.

console.log(add(2, 3)); // 5 - функция полностью hoisted

function add(a, b) {
  return a + b;
}

// Но function expression (стрелка) не hoisted
console.log(multiply(2, 3)); // TypeError: multiply is not a function
const multiply = (a, b) => a * b;

Практический пример TDZ

let x = 1;

function example() {
  console.log(x); // ReferenceError (не выводит 1!)
  let x = 2; // x hoisted в функции, но в TDZ
}

example();

Почему это важно

// Без понимания TDZ это может привести к ошибкам
const items = [1, 2, 3];

items.forEach((item) => {
  console.log(item); // 1, 2, 3
  const item = item * 2; // SyntaxError - нельзя переобъявить
});

Лучшие практики

1. Используйте const по умолчанию
2. Используйте let когда нужно переприсваивать
3. Избегайте var в современном коде
4. Всегда объявляйте переменные ДО их использования
5. Понимайте TDZ для избежания ReferenceError

Понимание hoisting критично для написания безопасного и предсказуемого кода на JavaScript.