💻 <easy.advice/>

Что такое hoisting в JavaScript?

👨‍💻 Frontend Developer ⚡ Высокий 🎚️ Средний
#JavaScript #База JS

Определение

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

Это не значит, что строки кода реально перемещаются, но движок JS сначала обрабатывает объявления, а затем выполняет код.

Как это работает?

Пример с var

console.log(a); // undefined
var a = 5;

Переменная a всплывает, но инициализация (= 5) происходит позже. Это работает так:

var a;
console.log(a); // undefined
a = 5;

Пример с let и const

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

let и const тоже всплывают, но попадают в TDZ (Temporal Dead Zone) — область, в которой переменная уже существует, но доступ к ней запрещён до инициализации.

Пример с функцией

greet(); // "Привет!"
 
function greet() {
  console.log("Привет!");
}

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

Пример с function expression

sayHi(); // TypeError: sayHi is not a function
 
var sayHi = function() {
  console.log("Hi");
};

Здесь sayHi — переменная, объявленная через var, она всплывает как undefined, но функция не привязана к ней до строки с присваиванием.

Что всплывает, а что нет?

Тип конструкцииВсплывает?Комментарий
varДаОбъявление всплывает, но инициализация — нет
let / constДа (но в TDZ)ReferenceError при доступе до инициализации
function declarationДаВсплывает вместе с телом функции
function expressionЧастичноПеременная всплывает, но как undefined
arrow function через constДа (но в TDZ)Ошибка до инициализации

Задачи для практики

Задача 1

console.log(name);
var name = "Aleksandr Ermolov";
Ответ `undefined` — переменная всплыла, но значение присвоено позже.

Задача 2

sayHello();
 
function sayHello() {
  console.log("Hello");
}
Ответ "Hello" — `function declaration` всплывает полностью.

Задача 3

sayBye();
 
var sayBye = function () {
  console.log("Bye");
};
Ответ TypeError — `sayBye` равно `undefined` при вызове.

Задача 4

console.log(age);
let age = 30;
Ответ ReferenceError — `let` в TDZ до строки инициализации.

Задача 5

greet();
 
const greet = () => {
  console.log("Hi!");
};
Ответ ReferenceError — `const` в TDZ, а это `function expression`.

Задача 6

if (true) {
  var test = "yes";
}
console.log(test);
Ответ "yes" — `var` имеет **функциональную**, а не блочную область видимости.

Резюме

  • var и function declaration всплывают, let/const — тоже, но попадают в TDZ.
  • Функции, объявленные как function expression, не всплывают как полноценные функции.
  • Понимание hoisting помогает избежать неочевидных багов и пройти технические интервью.

Хочешь больше статей по подготовке к собеседованию? Подпишись на EasyAdvice(@AleksandrEmolov_EasyAdvice), добавляй сайт в избранное и прокачивай себя каждый день 💪