Какая переменная всплывает?

Отличный вопрос! Он затрагивает самую суть механизма Hoisting (всплытие или поднятие) в JavaScript. Прямой и краткий ответ:

Всплывает объявление переменной, объявленной с помощью ключевого слова var. Объявления let и const также технически всплывают, но они попадают во временную мёртвую зону, из-за чего ведут себя так, как будто не всплыли.

Теперь давайте разберем это подробно и с примерами.

Что такое всплытие (Hoisting)?

Это поведение механизма выполнения JavaScript, при котором объявления переменных и функций "поднимаются" (всплывают) вверх своей области видимости (scope) перед выполнением кода. Важно понять, что всплывает именно объявление, а не присваивание значения.

1. Всплытие var

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

console.log(myVar); // Выведет: undefined (а не ошибку!)
var myVar = 10;
console.log(myVar); // Выведет: 10

Интерпретатор "видит" этот код примерно так:

var myVar; // Объявление всплыло, значение = undefined
console.log(myVar); // undefined
myVar = 10; // Присваивание осталось на месте
console.log(myVar); // 10

2. Временная мёртвая зона (Temporal Dead Zone - TDZ) для let и const

Переменные, объявленные через let и const, также технически всплывают — их объявление регистрируется в начале области видимости. Однако они не инициализируются до момента выполнения строки с их объявлением. Промежуток между началом области видимости и строкой объявления называется Временной Мёртвой Зоной (TDZ). Обращение к переменной в TDZ вызывает ошибку.

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

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

Ключевая разница: var всплывает и инициализируется undefined, а let/const всплывают, но остаются неинициализированными (в TDZ) до своего фактического объявления в коде.

3. Всплытие функций

Поведение зависит от типа объявления функции:

• Function Declaration (объявление функции): Всплывает полностью, включая её тело. К функции можно обратиться до объявления.

  sayHello(); // Выведет: "Hello!"
  
  function sayHello() {
      console.log("Hello!");
  }
  

• Function Expression (функциональное выражение): Всплывает только как переменная (по правилам var, let или const).

  // С использованием var
  console.log(myExpression); // undefined
  myExpression(); // TypeError: myExpression is not a function
  var myExpression = function() {
      console.log("Expression with var");
  };
  
  // С использованием const (находится в TDZ)
  console.log(myConstExpression); // ReferenceError
  const myConstExpression = function() {
      console.log("Expression with const");
  };
  

Практические выводы и лучшие практики

1. Всегда используйте let и const. Они предсказуемее и безопаснее var из-за блочной области видимости и TDZ, что предотвращает ошибки доступа к неинициализированной переменной.
2. Объявляйте переменные как можно ближе к месту их первого использования. Это делает код чище и понятнее.
3. Для функций, которые должны быть вызваны до объявления, используйте Function Declaration. В остальных случаях часто предпочтительнее Function Expression или стрелочные функции, присвоенные const.
4. Понимание всплытия критично для отладки. Странное поведение с undefined вместо ошибки часто связано с использованием var.

Итог: Полностью "всплывает" (с инициализацией undefined) только var. let и const подвержены механизму всплытия, но их использование блокируется TDZ, что является более строгим и желательным поведением современного JavaScript.