Давайте проясним подъем на JavaScript

Что такое подъем в JavaScript и как это работает?

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

В контекстах выполнения есть две фазы - фаза создания и фаза выполнения. Этап создания - это этап, на котором происходит подъем. Теперь давайте попробуем понять, как работает подъемник, на примерах.

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

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

Дело 1

console.log(icecream); // Prints undefined
var icecream = “Vanilla”;

В приведенном выше фрагменте кода мы пытаемся использовать переменную еще до ее объявления. Похоже, это вызовет ошибку. Но так ли это? Здесь на сцену выходит подъемный механизм.

Механизм JavaScript при запуске этого кода сначала создает контекст выполнения. Как только контекст выполнения создан, он начинается с этапа создания. На этапе создания механизм анализирует код, разделяет объявления и инициализации на два оператора и перемещает все объявления в начало кода. Все переменные, объявленные с использованием ключевого слова var, при подъеме будут инициализированы значением по умолчанию undefined. Это причина, по которой он печатает undefined, а не ошибку, когда JavaScript выполняет вышеуказанный код.

Случай 2

console.log(icecream); // Prints ReferenceError: icecream is not defined
let icecream = “Vanilla”;

Когда движок JavaScript выполняет приведенный выше код, он выдает ошибку ссылки. Почему так происходит? Разве он не должен печатать undefined? Действительно ли подняты объявленные переменные let? Ну, переменные let тоже поднимаются, но они немного отличаются от var.

Механизм JavaScript при запуске этого кода создает контекст выполнения. Как только контекст выполнения создан, он начинается с этапа создания. На этапе создания механизм анализирует код, разделяет объявления и инициализации на два оператора и перемещает все объявления в начало кода.

А теперь разница: все переменные, объявленные с помощью ключевого слова let, не будут иметь значения по умолчанию, такие как var; вместо этого они будут помечены как находящиеся в режиме TDZ (временной мертвой зоны) при подъеме. Это просто означает, что переменные существуют, но они недоступны, пока не будут инициализированы значением. Это причина, по которой JavaScript выдает ошибку ссылки при подъеме объявленных переменных let.

Случай 3

console.log(icecream); // Prints ReferenceError: icecream is not defined
const icecream = “Vanilla”;

А как насчет объявленных переменных const? Ну, константные переменные тоже поднимаются, и они работают точно так же, как и let с точки зрения подъема. Это причина того, что мы получаем ту же ошибку, когда также поднимаются объявленные переменные const.

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

Подъем, при котором объявление функции будет перемещено в начало кода, называется подъемом функции.

Дело 1

getIcecream(); // Prints Vanilla Icecream
function getIcecream() {
 console.log(“Vanilla Icecream”),
}

Механизм JavaScript при запуске приведенного выше кода создает контекст выполнения и начинает фазу создания. На этапе создания он перемещает все объявления переменных и функций в начало кода. В этом случае объявление функции getIcecream будет перемещено в начало кода. Вскоре после этапа создания начинается этап выполнения, на котором будет выполняться код. Поскольку функция getIcecream уже была объявлена ​​на этапе создания, при вызове getIcecream будет выводиться ожидаемый результат, а не ошибка.

Случай 2

icecream(); // Prints TypeError: icecream is not a function
var icecream = function () {
 console.log(“Vanilla Icecream”)
}

Механизм JavaScript при запуске приведенного выше кода создает контекст выполнения и начинает фазу создания. На этапе создания он перемещает все объявления переменных и функций в начало кода. В этом случае var icecream назначается функции, этот оператор называется функциональным выражением. Поскольку механизм определяет переменную var icecream, он перемещает объявление в начало кода и присваивает значение по умолчанию undefined, оставляя код функции позади. На этапе выполнения, когда он встречает оператор icecream (), он выдаст ошибку типа, поскольку механизм ожидал функцию, но вместо этого получил неопределенное значение. Это причина, по которой не поднимаются функциональные выражения. А как насчет стрелочных функций? То же самое относится и к стрелочным функциям. Это означает, что стрелочные функции также не поднимаются.

Надеюсь, это проясняет, как работает подъем в JavaScript. Если вы считаете, что эта статья была полезной, пожалуйста, проявите свою любовь и поделитесь ею со своими собратьями в социальных сетях, которые могут максимально использовать это. Всегда свободно связывайтесь со мной в Twitter, LinkedIn или по электронной почте.

Пока мы не встретимся снова, The Mallu Dev подписывает контракт 👋 Ура! 🥂

Больше контента на plainenglish.io