В этой статье мы поговорим о JS Hoisting и о том, как он работает с функциями и ключевыми словами var, let, и const.

Контент

  • Что такое подъем
  • Поднятие с помощью let и const

Что такое подъем

JS является однопоточным языком и выполняется построчно (с парадигмой JIT-компиляции).

Не вдаваясь в это направление, подъем в JS — это поведение, при котором переменные/функции объявляются в памяти еще до того, как переменные/функции будут инициализированы/объявлены, или, можно сказать, даже до выполнения первой строки кода. Рассмотрим код ниже:

console.log(a); // this logs the keyword "undefined" on the console
var a = 10;

Здесь естественно должно произойти то, что, поскольку мы регистрируем aещё до его объявления, он должен выдать RefenceError.

ПРИМЕЧАНИЕ.undefinedявляется заполнителем по умолчанию до тех пор, пока переменная не будет инициализирована.

Интересно правда!!!. Давайте немного углубимся в это….

Создайте базовый проект JS и HTML, запустите его в Chrome и включите в файл JS следующий код:

console.log(a);
var a = 10;
function b() {
  console.log("calling function b")
}
b();

Теперь, когда вы закончите настройку, откройте dev-tools в chrome. После этого перейдите на вкладкуsourceи поместите отладчик в первую строку и обновите браузер, как показано на рисунке ниже:

в этот момент вы увидите, что на самом деле происходит за сценой в JS Engine, щелкните раскрывающийся список Scope, как показано ниже:

Здесь, под кнопкой раскрывающегося списка Globe, вы можете увидеть, что переменная a и function b уже выделила место в области Global еще до того, как line 2 и line 4 были выполнены.

Интересно правда...??

Вы можете попробовать изучить, что произойдет дальше, с помощью обхода в отладчике.

Поднятие с помощью let и const

Переменные, объявленные с ключевыми словами let и const, также поднимаются, но в отличие от var они не инициализируются значением по умолчанию (т.е. undefined), и мы получим следующий ответ из приведенного ниже блока кода:

console.log(a); // Throws RefferenceError as the variable is not yet initialised
let a = 10;

здесь a недоступен до тех пор, пока он не будет инициализирован и находится в Временной мертвой зоне.

Но есть кое-что интересное, что можно наблюдать в движке Google V8:

здесь вы можете видеть, что в отличие от b переменная a не находится внутри области Global.

В двух словах это подъем JS.

Надеюсь, вам понравится прочитанное.

Огромный привет этому плейлисту

Свяжитесь со мной в Twitter