Если вы новичок в JavaScript, возможно, вы сталкивались с запутанными ситуациями, когда переменные кажутся неопределенными или неожиданно возникают ошибки, такие как ReferenceError. Это часто можно объяснить концепцией, известной как подъем. Но что такое подъем и как он влияет на ваш код?

В этом руководстве мы разберем концепцию подъема и то, как она работает в JavaScript. К концу вы поймете, почему происходит подъем и как можно избежать распространенных ошибок.

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

Сначала JavaScript проходит этап создания, на котором выделяется память для переменных и функций. Однако способ обработки функций и переменных немного отличается.

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

Например:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a   b);
}

Несмотря на то, что функция sum() вызывается до ее объявления в коде, она работает отлично, поскольку объявление функции поднимается в начало области видимости на этапе создания.

Подъем переменных: var, let и const
Подъем переменных ведет себя иначе, чем подъем функций, и зависит от того, используете ли вы var, let или const.

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

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

В этом примере изначально городу присваивается неопределенное значение. После присвоения значения «Нью-Йорк» второй console.log() правильно выводит «Нью-Йорк».

2. Объявления let и const
С помощью let и const переменные также поднимаются, но остаются неинициализированными. Это означает, что если вы попытаетесь получить к ним доступ до их объявления, вы получите ошибку ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

Эта ошибка возникает из-за того, что переменные let и const существуют в так называемой временной мертвой зоне (TDZ) между началом их области действия и точкой, где они фактически объявлены. В течение этого времени вы не можете ссылаться на переменную.

Ключевая разница между let и const
И let, и const ведут себя одинаково с точки зрения подъема, но const требует присвоения значения во время объявления, а let позволяет объявлять переменную без немедленного присвоения значения.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Подъем на практике
Давайте посмотрим на пример, демонстрирующий подъем функций и переменных в действии:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x   y);
}

var city = "New York";
console.log(city); // Output: "New York"

Здесь функция sum поднимается с полным определением, поэтому ее можно вызвать до объявления функции. Тем не менее, городу присваивается значение неопределенное, что объясняет, почему первый console.log() выводит неопределенное значение. Как только присвоение происходит, второй console.log() выводит правильное значение.

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

1. — Используйте let и const вместо var, чтобы избежать доступа к переменным до их объявления.
2.  – Объявляйте переменные и функции в верхней части их области видимости, чтобы обеспечить предсказуемое поведение вашего кода.

Краткий обзор основных концепций подъема

• Поднятие относится к поведению JavaScript по перемещению объявлений в верхнюю часть области видимости перед выполнением кода.
• Функции, объявленные с помощью function, поднимаются со своими полными определениями, что позволяет использовать их до их объявления.
• Переменным, объявленным с помощью var, присваивается значение по умолчанию, равное неопределенному, в то время как переменные, объявленные с помощью let и const, остаются неинициализированными, что приводит к возникновению ошибки ReferenceError при доступе к ним до объявления.
• Временная мертвая зона (TDZ) применяется к let и const, предотвращая доступ к ним до их инициализации.

Понимая подъем, вы сможете избежать распространенных проблем в JavaScript и написать более предсказуемый код. С практикой эти концепции станут вашей второй натурой.