Разработчики часто испытывают ненависть к JavaScript, потому что иногда он работает не так, как ожидалось. Изучение основ JavaScript и его причуд может помочь разработчикам в отладке и написании чистого кода. Цель этой статьи — объяснить одну из таких особенностей, а именно подъем с помощью анимированных gifs 🌟✨. После прочтения этого блога вы станете на шаг ближе к тому, чтобы стать разработчиком Rockstar 🎸😎.
Выполнение кода JavaScript.
Прежде чем разбираться с концепциями подъема, давайте сначала узнаем, как javascript будет выполнять код за сценой на примере.
var a = 2;
var b = 4;
var sum = a + b;
console.log(sum);
В этом простом примере мы инициализируем две переменные, a и b, и храним в них значения 2 и 4 соответственно.
Затем мы складываем значения a и b и сохраняем их в переменной sum.
Давайте посмотрим, как JavaScript выполнит код в браузере 🤖.
Когда JS впервые получит наш код, он создаст контекст выполнения. Контекст выполнения сначала просканирует весь код и выделит память для всех переменных и функций. Для переменных, в частности var, JavaScript будет хранить в памяти неопределенное значение, а для функций — всю ссылку на код функции.
Теперь, когда мы отсканировали и выделили память для кода, мы можем выполнить его. JavaScript снова начнет просматривать весь код строка за строкой.
Когда он встречает var a = 2, он присваивает 2 значению ‘a’ в памяти. До этого момента значение ‘a’ было неопределенным.
Аналогично, он делает то же самое для переменной b. Она присваивает ‘b’ значение 4. Затем вычисляет и сохраняет в памяти значение суммы, равное 6. На последнем этапе выводит значение суммы в консоль и уничтожает глобальный контекст выполнения, так как наш код завершен.
Если вы хотите узнать больше о выполнении кода в JavaScript, я написал статью об этом на dev community.
Ссылка: Как работает Javascript — наглядное объяснение
Подъем в var
Чтобы понять, что такое hoisting в переменной, определенной с помощью var, давайте возьмем пример, который мы рассмотрели при выполнении кода. Однако в этом примере мы собираемся вывести сумму в начале, а не в конце.
console.log(sum);
var a = 2;
var b = 4;
var sum = a + b;
Приведенный выше код вызвал бы ошибку в других языках программирования, но не в JavaScript.
Как мы видели в разделе о выполнении кода, когда JS впервые получает наш код, он создает контекст выполнения. Контекст выполнения сначала просканирует весь код и выделит память для всех переменных и функций.
Теперь, после сканирования кода, он начнет выполнять код строка за строкой. В первой строке javascript проверяет значение sum в памяти и выводит undefined.
Теперь, когда он встречает var a = 2, он присваивает 2 значению ‘a’ в памяти. До этого момента значение ‘a’ было неопределенным.
Аналогично, он делает то же самое для переменной b. Она присваивает ‘b’ значение 4. Затем вычисляет и сохраняет в памяти значение суммы, равное 6.
Если мы выполним консольный лог после вычисления суммы, то посмотрим, что получится.
Изначально будет выведено undefined, после вычисления суммы будет выведено 6. Эта особенность в javaScript называется hoisting. Давайте изучим hoisting в ключевых словах let, const и функциях.
Подъем в let и const
Когда мы обращаемся к переменной, объявленной с помощью ключевого слова var до ее объявления, она просто возвращает свое значение по умолчанию: undefined! Однако, как показано в предыдущем примере, иногда это может привести к «неожиданному» поведению.
Поэтому в ES6 введены два новых ключевых слова JavaScript для борьбы с этим неожиданным поведением: let и const. Эти два ключевых слова относятся к блочному диапазону. Для краткости этой статьи мы будем изучать область видимости в другом блоге.
Давайте посмотрим, как работают let и const на примере.
console.log(a);
console.log(sum);
var a = 2;
let b = 4;
const c = 6;
const sum = a + b + c;
Итак, давайте снова начнем с выполнения кода. Когда JS впервые получает наш код, он создает контекст выполнения. Контекст выполнения сначала просканирует весь код и выделит память для всех переменных и функций. Я знаю, что упоминал об этом много раз, но это важно 😅.
В отличие от var, где неопределенное хранится в памяти, переменные let и const являются неинициализированными.
После сканирования кода он начнет выполнять код строка за строкой. Первая строка выведет в консоль значение ‘a’, то есть undefined. Но когда мы пытаемся получить доступ к ключевым словам let и const до инициализации, возникает ошибка ReferenceError при попытке доступа к неинициализированным переменным. Доступ к неинициализированным переменным невозможен, поскольку они находятся во временной мертвой зоне.
Временная мертвая зона означает, что у нас нет доступа к переменным до их объявления.
Если мы попытаемся вывести значение ‘b’ вместо суммы, результат будет тот же.
Значение суммы должно быть выведено, как только завершится замедление передачи значения в переменную.
Вот визуализация выполнения кода.
Сохранение в функции
Когда javaScript начинает сканирование кода и натыкается на функцию, он сохраняет ссылку на функцию в памяти. Это причина, по которой мы можем вызвать функцию еще до ее создания. Давайте посмотрим на это в действии на примере.
printSum(4,5)
function printSum(a,b){
const c = a + b;
console.log(c);
}
Выходом будет следующий код.
Попробуем представить, что сначала JavaScript просканирует код, встретит функцию в 3-й строке и добавит ссылку на нее в память.
Теперь Javascript прогонит код строка за строкой. Он встречает функцию в первой строке. Когда функция выполняется в javascript, она создает новый контекст выполнения в нашем глобальном контексте выполнения. Считайте, что контекст выполнения функции — это мини-контекст выполнения, со своей памятью и местом для выполнения кода в функции.
Подробнее о том, как функции выполняют код, читайте в этой статье блога.
Как только весь код внутри функции будет выполнен, контекст выполнения функции будет уничтожен.
Ссылка
- Namaste JavaScript
Надеюсь, этот пост был информативным. Не стесняйтесь комментировать или обращаться ко мне, если у вас возникли вопросы 💪🏾.
Для более подробной информации загляните в мой блог blog.webdrip.in