Демистификация подъема для разработчиков Javascript

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

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

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

1. Функции

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

Например, следующий код будет работать, потому что функция foo() поднимается интерпретатором в начало области видимости:

foo();
function foo() {
  console.log("Hello, World!");
}

Важно отметить, что функции, созданные с использованием функциональных выражений и стрелочных функций, не поднимаются, и вызов их до объявления не будет работать. Давайте рассмотрим пример:

foo(); // ReferenceError: foo is not defined
const foo = function() {
  console.log("Hello, World!");
}

2. Вар

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

console.log(num); // undefined
var num = 10;
console.log(num); // 10

Вы получите undefined в качестве первого вывода и 10 во втором. Это связано с тем, что переменная поднимается вверх, но без значения инициализации по умолчанию она имеет значение undefined.

3. Пусть, Константа и Класс:

Теперь поговорим о подъеме с помощью let и const. Существует распространенное заблуждение, что let и const не поднимаются, но это не так. Эти два ключевых слова похожи тем, что они оба поднимаются наверх своей области действия, как и var.

Однако между ними есть принципиальная разница. Когда вы пытаетесь получить доступ к переменной let или const до того, как она была объявлена, вы получите ReferenceError: Cannot access 'num' before initialization . Это связано с тем, что эти переменные поднимаются без инициализации по умолчанию, в отличие от var.

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

Это вызовет ошибку, и программа перестанет выполняться. Это так называемая «временная мертвая зона», время во время выполнения, когда переменные let или const поднимаются, но недоступны.

Может возникнуть вопрос, чем отличается поведение при доступе к переменной, объявленной с помощью let или const, перед инициализацией от доступа к необъявленной переменной. Разница заключается в сообщении об ошибке.

Возьмем пример:

{
  console.log(stuff); // ReferenceError: stuff is not defined
  console.log(goodStuff); // ReferenceError: Cannot access 'goodStuff' before initialization
  let goodStuff = "Something really good";
}

Здесь мы можем заметить, что сообщение об ошибке для «goodStuff» указывает на то, что он поднят, и интерпретатор распознает его существование, но он еще не инициализирован. Напротив, интерпретатор вообще не распознает «материал» как переменную. Объявления class также поднимаются так же, как let и const с временной мертвой зоной.

Заключительные мысли

Я надеюсь, что эта статья помогла вам понять подъем в JavaScript и то, как он работает с различными типами переменных, функциями и классами. Эта концепция может быть сложной, но вы можете писать более качественный и эффективный код, если поймете ее. Продолжайте практиковаться и экспериментировать с кодом, чтобы продолжать совершенствовать свои навыки. Удачного кодирования!

Совет профессионала:

Рекомендуется избегать использования var для объявления переменных в JavaScript, так как это может привести к непредсказуемым результатам и путанице при обработке переменных. Вместо этого рекомендуется использовать let или const.

Также опубликовано здесь