JavaScript с нуля

Как JavaScript обрабатывает переменные

Если вам показалось, что логика областей блока из предыдущего раздела выглядит странно, значит, вы еще не видели следующий пример. Взгляните на этот код:

let foo = "Hello!";

alert(foo);

Глядя на него, мы можем обоснованно утверждать, что отобразится значение Hello! и в целом будем правы. А что, если переместить объявление и инициализацию переменной в конец?

alert(foo);

let foo = "Hello!";

В этом случае код выдаст ошибку. Доступ к переменной foo осуществляется без обращения к ней. А теперь давайте заменим let на var, получив следующее:

alert(foo);

var foo = "Hello!";

При выполнении этого варианта кода его поведение будет отличаться от предыдущего и вы увидите отображение undefined. Что конкретно здесь происходит?

Когда JavaScript при выполнении достигает определенной области (глобальной, функции и т. д.), то первое, что он делает, — полностью сканирует тело кода в поиске объявленных переменных. Если он встречает переменные, объявленные с var, то по умолчанию инициализирует их как undefined. Если же они объявлены с let или const, он оставляет их полностьюнеинициализированными. При завершении он перемещает все встреченные переменные в верхнюю часть соответствующей им области, которой в случае с let и const является ближайший блок, а в случае с var — ближайшая функция.

Давайте подробнее рассмотрим, что это значит. Изначально наш код выглядит так:

alert(foo);

let foo = "Hello!";

Когда JavaScript приступает к его обработке, код принимает следующий вид:

let foo;

alert(foo);

foo = "Hello!";

Несмотря на то что переменная foo была объявлена в нижней части кода, она смещается вверх. Формально это называется поднятием переменной. Особенность let и const в том, что при поднятии переменные остаются неинициализированными. Если вы попробуете обратиться к неинициализированной переменной, то код выдаст ошибку и прекратит выполнение. Если мы изменим предыдущий пример, используя var, то в итоге для JavaScript код будет выглядеть так:

var foo = undefined;

alert(foo);

foo = "Hello!";

Переменная по-прежнему поднимается, но при этом инициализируется как undefined, благодаря чему код продолжает выполнение.

Главная мысль из всего этого: пожалуйста, объявляйте и инициализируйте переменные прежде, чем их использовать. Несмотря на то что JavaScript способна в некоторой степени справиться с работой в тех случаях, когда мы пренебрегаем данными действиями, это лишь добавит еще больше путаницы.