Что такое всплытие​

Чтобы понять что такое всплытие (hoisting), необходимо хотя бы на пальцах понять как интерпретируется код JavaScript.

Можно воспринимать это так, что интерпретация происходит в два шага:
1. Интерпретатор пробегает по всему файлу не выполняя его, а лишь проверяя на синтаксические ошибки, инициализируя все переменные.
2. Интерпретатор проходит по коду и выполняет его.

Рассмотрим конкретный пример:

sum(2, 5); // 7
substract(5, 4); // ReferenceError

function sum(a, b) {
 return a + b;
}

const substract = function(a, b) {
 return a - b;
}

В коде выше мы объявляем две примитивные функции и пытаемся получить к ним доступ ещё до объявления. Функция sum возвращает ожидаемый результат, несмотря на то, что вызвана она до того, как объявлена. Вызов же функции substract выбрасывает ошибку.

Связано это в первую очередь со способом объявления этих функций. sum объявлена через Function declaration, именно поэтому вызов функции до её объявления работает корректно.

Функция substract объявлена через Function expression, а такие функции не всплывают.

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

Работает это не только с функциями, вот ещё один пример:

console.log(name); // undefined

var name = 'Denis';

console.log(name); // Denis
console.log(channel); // ReferenceError

const channel = 'progway';

console.log(channel); // progway

Переменная channel не всплыла, из-за чего мы получили ошибку при обращении до объявления. Всплывают только переменные, объявленые через ключевое слово var. Подробнее о ключевых словах для объявления переменной я писал тут.

Переменная name всплыла, из-за чего ещё на первой строчке мы смоги получить к ней доступ без ошибки. Тут есть нюанс: мы получили undefined. Чтобы понять почему, рассмотрим как примерно выглядит этот код после первой стадии интерпретации:

// инициализировали значение
// но значение еще не записали
var name;
// получаем доступ
console.log(name);
// присваиваем значение
name = 'Denis';

Из этого кода должно быть понятно. Тот случай, когда проще показать, чем объяснить.

Спасибо за прочтение, это важно для меня

#javascript #theory #web