Что такое поднятие переменных?

Что такое поднятие переменных (Hoisting) в JavaScript?

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

Как работает hoisting на практике?

Рассмотрим ключевые аспекты поднятия:

1. Поднятие переменных, объявленных через var

• Объявление переменной поднимается, но инициализация (присвоение значения) остаётся на месте.
• До инициализации переменная имеет значение undefined.

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

Фактически код интерпретируется так:

var myVar; // Объявление поднято
console.log(myVar); // undefined
myVar = 10; // Инициализация осталась на месте
console.log(myVar); // 10

2. Поднятие переменных, объявленных через let и const

• С let и const hoisting работает иначе: объявления также поднимаются, но переменные остаются в «временной мёртвой зоне» (Temporal Dead Zone, TDZ) до момента объявления.
• Обращение к переменной до объявления вызовет ошибку.

console.log(myLet); // Ошибка: Cannot access 'myLet' before initialization
let myLet = 5;

console.log(myConst); // Ошибка: Cannot access 'myConst' before initialization
const myConst = 'Hello';

3. Поднятие функций

• Function Declaration поднимается полностью (и объявление, и тело функции), поэтому функцию можно вызвать до объявления.

sayHello(); // "Hello!"

function sayHello() {
  console.log("Hello!");
}

• Function Expression (присвоение функции переменной) подчиняется правилам hoisting переменных:

     - С `var` — переменная поднимется, но будет `undefined` до инициализации.
     - С `let`/`const` — вызов до объявления вызовет ошибку.

// С var
console.log(funcVar); // undefined
funcVar(); // Ошибка: funcVar is not a function
var funcVar = function() {
  console.log("Function Expression");
};

// С let
funcLet(); // Ошибка: Cannot access 'funcLet' before initialization
let funcLet = function() {
  console.log("Function Expression with let");
};

Почему важно понимать hoisting?

• Избегание ошибок: Знание о TDZ для let/const помогает предотвратить ошибки доступа к переменным.
• Читаемость кода: Лучше объявлять переменные и функции в начале области видимости для ясности.
• Отладка: Позволяет понимать неожиданное поведение (например, значение undefined вместо ошибки).

Практические примеры и отличия

// Пример 1: var vs let
function exampleVar() {
  console.log(x); // undefined
  var x = 5;
}
exampleVar();

function exampleLet() {
  console.log(y); // Ошибка: TDZ
  let y = 5;
}
exampleLet();

// Пример 2: Function Declaration vs Expression
testDecl(); // Работает
function testDecl() {}

testExpr(); // Ошибка: testExpr is not a function (если var) или TDZ (если let/const)
var testExpr = function() {};

Итог

• Hoisting — это «подъём» объявлений вверх области видимости.
• var: поднимается с значением undefined.
• let/const: поднимаются, но недоступны до объявления (TDZ).
• Function Declaration: поднимается полностью.
• Function Expression: следует правилам переменных.

Понимание hoisting критично для написания надёжного кода и прохождения собеседований, так как демонстрирует глубокое знание языка JavaScript.