Поднятие переменных в Javascript

"Поднятие" (hoisting) – это поведение JavaScript по умолчанию, когда любая декларация передвигается вверх области видимости.

Декларации в JavaScript поднимаются

В JavaScript переменная может декларироваться уже после использования.

Другими словами, переменная может использоваться до того, как она будет декларирована.

Ниже, результат в примере 1 будет таким же, что в примере 2.

Пример 1

x = 5;  // Присвоить 5 переменной x

elem = document.getElementById("demo"); // Найти элемент
elem.innerHTML = x;                     // Вставить значение переменной x в элемент

var x; // Декларировать переменную x

Пример 2

var x; // Декларировать переменную x
x = 5; // Присвоить 5 переменной x

elem = document.getElementById("demo"); // Найти элемент
elem.innerHTML = x;                     // Вставить значение переменной x в элемент

Чтобы в этом разобраться, необходимо понять сам термин "поднятие".

"Поднятие" (hoisting) – это поведение JavaScript по умолчанию, когда все декларации передвигаются вверх текущей области видимости (вверх текущего скрипта или текущей функции).

Инициализации не поднимаются

В JavaScript поднимаются только декларации, а не инициализации.

Ниже, результат в примере 1 будет не таким же, что в примере 2.

Пример 1

var x = 5; // Инициализация переменной x
var y = 7; // Инициализация переменной y

elem = document.getElementById("demo"); // Найти элемент
elem.innerHTML = x + " " + y;           // Отобразить x и y

Пример 2

var x = 5; // Инициализация переменной x

elem = document.getElementById("demo"); // Найти элемент
elem.innerHTML = x + " " + y;           // Отобразить x и y

var y = 7; // Инициализация переменной y 

В последнем примере будет выведено undefined как значение переменной y. Это вызвано тем, что только декларации (var y), а не инициализации (=7) поднимаются вверх.

Благодаря "подъему" переменная y была декларирована перед использованием, но так как инициализация не поднимается, значение переменной y оказывается неопределенным (undefined).

Пример 2 аналогичен следующей записи:

var x = 5; // Инициализация переменной x
var y;     // Декларирование переменной y

elem = document.getElementById("demo"); // Найти элемент
elem.innerHTML = x + " " + y;           // Отобразить x и y

y = 7;    // Присвоить 7 переменной y 

Всегда декларируйте переменные в начале!

Для многих разработчиков "подъем" остается неизвестным или упускаемым из виду поведением JavaScript.

Если разработчик не учитывает "подъем", то в коде могут появляться ошибки.

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

Внимание! В строгом режиме JavaScript не допускает использование переменных, если они не декларированы.