Практика: области видимости, hoisting, лексическое окружение

Задача: сказать, что будет в консоли и почему?

Задача 1


let value = 2;

function showValue() {
     console.log(`showValue ${value}`); //
}

function wrapper() {
		 var value = 3;
     
		 console.log(`wrapper ${value}`); //
     
     showValue();
}

wrapper();

Задача 2


let value = 2;

function showValue() {
     console.log(`showValue ${value}`);
}

function wrapper() { 
		 console.log(`wrapper ${value}`);
		 
		 let value = 3;
     
     showValue();
}

wrapper();

🎯 Зачем спрашивают

📝 Ответ

Задача 1


let value = 2;

function showValue() {
     console.log(`showValue ${value}`); // 2
}

function wrapper() {
		 var value = 3;
     
     // Вывод: 3
		 console.log(`wrapper ${value}`); // 3
     
     showValue();
}

wrapper();

Ответ showValue выведет 2. Почему

Лексическое окружение создаётся при объявлении функции, а не при её вызове. Поэтому showValue навсегда «захватила» ссылку на переменную value из глобальной области, а не из wrapper.

wrapper выведет 3. Функция нашла переменную в своем лексическом окружении.

Задача 2


let value = 2;

function showValue() {
     console.log(`showValue ${value}`);
}

function wrapper() {
		 console.log(`wrapper ${value}`);
		 
		 let value = 3;
     
     showValue();
}

wrapper();

Ответ Вызовется функция wrapper и произойдет ошибка ReferenceError: Cannot access 'value' before initialization

Почему

Все из-за образовавшейся Temporal Dead Zone (временно мертвая зона). В коде "застолбили" место для value переменной, но при этом к ней не получить доступа.

Переменные, объявленные через let и const, попадают в TDZ — участок кода от начала блока до строки объявления. При попытке обращения в этот промежуток интерпретатор выдаёт ReferenceError, потому что переменная существует, но ещё не инициализирована.

⚖️ Компромиссы

🔎 Встречные вопросы

Что произойдёт, если объявить value через var вместо let во второй задаче?

Какое значение примет value, если объявить function value() {} в глобальной области?

🚩 Красные флаги

Ответ «2 и 3» без объяснения почему.

Путаница между временем объявления и вызова функции.

Непонимание, что TDZ ≠ hoisting-отсутствие (переменная всё равно поднята).

🛠 Практика

📚 Источники / ссылки

iliakanОбласть видимости переменных, замыкание
Область видимости переменных, замыкание
JavaScript – язык с сильным функционально-ориентированным уклоном. Он даёт нам много свободы. Функция может быть динамически создана, скопирована в другую переменную или передана как аргумент другой функции и позже вызвана из совершенно другого места.
iliakan

freeCodeCamp.orgTemporal Dead Zone (TDZ) and Hoisting in JavaScript – Explained with Examples
Temporal Dead Zone (TDZ) and Hoisting in JavaScript – Explained with Examples
Temporal Dead Zone and Hoisting are two essential terms in JavaScript. But understanding how they work can easily confuse you if you don't approach them properly. But don't fret! This article is here to help you get a good grasp of the two terms. So ...
freeCodeCamp.org

skondratev.comВременная мертвая зона (TDZ - Temporal Dead Zone) в JS - skondratev.com
Временная мертвая зона (TDZ - Temporal Dead Zone) в JS - skondratev.com
Временная мертвая зона (Temporal Dead Zone) – термин, обозначающий состояние, в котором переменные недоступны. Они находятся в области видимости (scope), но не объявлены (not declared). Переменные…
skondratev.com

MDN Web DocsFunctions - JavaScript | MDN
Functions - JavaScript | MDN
Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.
MDN Web Docs