Как происходит всплытие Const?

Hoisting и Temporal Dead Zone для const

Вопрос про hoisting часто вызывает путаницу. Важно понимать что const, let и var ведут себя по-разному, и это связано с концепцией "Temporal Dead Zone".

Что такое hoisting?

Hoisting - это поведение интерпретатора JavaScript, когда объявления переменных и функций "поднимаются" на верхний уровень scope перед выполнением кода. Но это работает по-разному для разных типов объявлений.

var - классический hoisting

console.log(x); // undefined (не ReferenceError!)
var x = 5;
console.log(x); // 5

// Интерпретируется как:
var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5

var всплывает (hoisting) и инициализируется значением undefined автоматически.

const и let - Temporal Dead Zone

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

// Интерпретируется как:
// y существует в scope, но не инициализирована (TDZ)
console.log(y); // ReferenceError!
const y = 5;
console.log(y); // 5

Это основная разница: const и let тоже всплывают (hoisting), но не инициализируются. Они находятся в состоянии "Temporal Dead Zone" (TDZ) с начала scope до строки их объявления.

Понимание Temporal Dead Zone

function example() {
  console.log(typeof x); // ReferenceError (не "undefined")
  const x = 10;
}

// const и let имеют block scope
{
  console.log(z); // ReferenceError - z в TDZ
  const z = 'hello';
  console.log(z); // 'hello'
}
console.log(typeof z); // ReferenceError - z не существует вне блока

Практические примеры ошибок

// Ошибка 1: использование до объявления
function checkType() {
  console.log(typeof name); // ReferenceError!
  const name = 'John';
}

// Правильно:
function checkType() {
  const name = 'John';
  console.log(typeof name); // 'string'
}

// Ошибка 2: closure и TDZ
function outer() {
  console.log(value); // ReferenceError в TDZ
  const value = 10;
  
  function inner() {
    console.log(value); // если вызвать после const, то 10
  }
  
  inner(); // OK, работает
}

Отличие от var

// var - hoisting с инициализацией undefined
function testVar() {
  console.log(a); // undefined
  var a = 1;
  console.log(a); // 1
}

// const - hoisting без инициализации (TDZ)
function testConst() {
  console.log(b); // ReferenceError!
  const b = 1;
  console.log(b); // никогда не выполнится
}

// let - тоже как const (TDZ)
function testLet() {
  console.log(c); // ReferenceError!
  let c = 1;
  console.log(c); // никогда не выполнится
}

Временная мертвая зона в loop

// Каждая итерация имеет свою TDZ
for (let i = 0; i < 3; i++) {
  // i находится в TDZ до инициализации в объявлении for
  console.log(i); // OK, выполнен код for (let i = ...)
}

// С var это не работает так же
for (var j = 0; j < 3; j++) {
  // j уже инициализирована как undefined
  console.log(j); // 0, 1, 2
}

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

TDZ введена в JavaScript для предотвращения ошибок:

• var может привести к сложным багам когда переменная случайно используется как undefined
• const и let вынуждают писать код в правильном порядке
• Это делает код более предсказуемым

Практический совет

• Всегда объявляй переменные до использования
• Используй const по умолчанию, let если нужна переменчивость
• Избегай var в современном коде
• Помни о TDZ при использовании const и let в if/for блоках

Хотя const технически "всплывает" как let, практически это не важно, так как TDZ не позволит его использовать до строки объявления.