Подъем в JavaScript

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

Подъем переменных

вар

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

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

пусть и константа

• Переменные, объявленные с помощью let и const, также поднимаются, но помещаются во «временную мертвую зону» до тех пор, пока не будут достигнуты их объявления. Доступ к ним до их объявления приведет к ошибке ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Подъем в функциях

Традиционная функция

• Объявления функций полностью поднимаются, то есть и объявление, и тело функции перемещаются в начало области видимости. Это позволяет вызывать функцию до ее объявления в коде.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Напротив, функциональные выражения (где функция присваивается переменной) поднимаются только как переменные, поэтому их вызов до инициализации переменной приведет к undefine или TypeError.

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

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Функция стрелки

• Напротив, функциональные выражения (где функция присваивается переменной) поднимаются только как переменные, поэтому их вызов до инициализации переменной приведет к undefine или TypeError.

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

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Временная мертвая зона (ВМЗ)

временная мертвая зона (TDZ) существует для переменных, объявленных с использованием let и const, поскольку JavaScript спроектирован таким образом, чтобы предотвратить доступ к этим переменным до их объявления и инициализации.

Почему var и let, const ведут себя по-разному при подъеме

• Это связано с исторической эволюцией JavaScript.
• Изначально JavaScript был разработан для пользователей, не являющихся разработчиками, и в основном JavaScript использовался для добавления небольших интерактивных элементов на веб-страницу.
• Так что var поддерживает только функциональную область. Также в то время не было области действия блока.
• Но в более позднем развитии JavaScript стало сложнее работать с var и исправлять ошибки.
• Поэтому, чтобы сделать JavaScript конкурентоспособным по сравнению с другими современными языками, были добавлены дополнительные функции, такие как let, const, стрелочные функции, методы ES6 и т. д.

Почему var не обновляется, как let и const

• Это из-за обратной совместимости.
• В то время JavaScript широко использовался многими предприятиями, поэтому обновление или внесение изменений в существующие функции привело бы к нарушению кодовой базы.
• Поэтому современные функции добавлялись индивидуально.

Общие вопросы на собеседовании

• Что такое подъем в JavaScript?
• Что поддерживается в JavaScript, а что нет?
• В чем разница между var, let и const применительно к подъему?
• Что такое временная мертвая зона (TDZ) в JavaScript?
• Можете ли вы объяснить подъем с помощью объявлений функций и выражений функций?
• Что такое подъем в модулях ES6?
• Почему нам не следует полагаться на подъем в реальном коде?

Краткое содержание

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