Руководство по глобальной области объявления переменных в JavaScript

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

Что делает функция Hoisting

Функции, которые определены с помощью объявления функции, автоматически «поднимаются» (hoisted). Это означает, что их можно вызвать до того, как они будут определены. Давайте разберемся с этим на примере:

// Вызываем функцию до ее объявления
sayHello(); // Выводит: Hello, I'm hoisted!

function sayHello() {
    alert("Hello, I'm hoisted!");
}

Как видите, мы вызвали функцию sayHello() до ее определения, но код все еще работает. Это связано с тем, что объявленные функции автоматически поднимаются вверх.

Как работает функция Hoisting с переменными

Точно так же объявленные переменные автоматически поднимаются в верхнюю часть их текущей области видимости. Это означает, что если переменная объявлена внутри функционального блока, она будет перемещена в верхнюю часть функции, но если она объявлена вне какой-либо функции, она будет перемещена в верхнюю часть скрипта и станет доступна глобально. Посмотрите на следующий пример, чтобы понять, как это работает:

str = "Hello World!";
alert(str); // Выводит: Hello World!
var str;

Тем не менее, JavaScript только поднимает объявления, а не инициализацию. Это означает, что если переменная объявлена и инициализирована после ее использования, значение будет undefined. Например:

alert(str); // Выводит: undefined
var str;
str = "Hello World!";

Вот еще один пример, демонстрирующий поведение переменной в JavaScript:

var i = 1; // Объявляем и инициализируем i
alert(i + ", " + j); // Выводит: 1, undefined
var j = 2; // Объявляем и инициализируем j

var x = 5; // Объявляем и инициализируем x
var y; // Declare y
alert(x + ", " + y); // Выводит: 5, undefined
y = 10; // Инициализируем y

var a = 3; // Объявляем и инициализируем a
b = 6; // Инициализируем b
alert(a + ", " + b); // Выводит: 3, 6
var b; // Declare b

var u = 4; // Объявляем и инициализируем u
alert(u + ", " + v); // Выводит: 4, undefined
var v; // Declare v
v = 8; // Инициализируем v

«Подъем переменных» может показаться немного запутанным на первый взгляд, но если вы внимательно изучите эти примеры, вы легко поймете, как это работает.