Как hoisting работает для var, let и const

Определение

Hoisting — это поведение движка, при котором объявления (declaration) учитываются до выполнения кода. Важно: “поднимается” не значение, а факт объявления.

var: поднятие + инициализация undefined

1. var имеет функциональную область видимости (function scope)

2. при входе в функцию переменная существует и равна undefined

Пример:

'use strict';

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

Это эквивалентно по смыслу:

'use strict';

var x;           // объявление поднялось
console.log(x);  // undefined
x = 10;          // присваивание осталось на месте
console.log(x);

let и const: поднятие объявления + TDZ

1. let/const имеют блочную область видимости (block scope)

2. переменная существует “в блоке”, но недоступна до строки объявления

3. попытка чтения до объявления → ReferenceError

Пример:

'use strict';

console.log(a); // ReferenceError
let a = 10;

const дополнительно

1. const нельзя объявить без значения

2. запрещено переназначение (но объект внутри может быть мутабельным)

Пример:

'use strict';

const n = 1;
// n = 2; // TypeError: Assignment to constant variable

Почему это важно в реальном коде

1. var может “маскировать” ошибки, возвращая undefined там, где ожидалась переменная

2. let/const дают более безопасное поведение: ошибка видна сразу

3. в циклах и блоках let часто предотвращает баги со “всплывающими” значениями

Вывод

var поднимается и инициализируется undefined, поэтому доступ “до объявления” возможен. let/const тоже поднимаются, но до инициализации находятся в TDZ, поэтому доступ до объявления приводит к ReferenceError — это делает код безопаснее.