Понимание областей действия переменных в JavaScript
В JavaScript есть два типа областей видимости.
- Глобальная область - область за пределами самой внешней функции, прикрепленной к окну.
- Локальная область видимости - внутри выполняемой функции.
Посмотрим на код ниже. У нас есть глобальная переменная, определенная в первой строке глобальной области видимости. Затем у нас есть локальная переменная, определенная внутри функции fun ().
let globalLet = "This is a global variable" ; function fun() { let localLet = "This is a local variable" ; console.log(globalLet); // This is a global variable console.log(localLet); // This is a local variable}fun(); |
Выход: 
Когда мы выполняем функцию fun (), вывод показывает, что как глобальные, так и локальные переменные доступны внутри функции, поскольку мы можем их console.log. Это показывает, что внутри функции у нас есть доступ как к глобальным переменным (объявленным вне функции), так и к локальным переменным (объявленным внутри функции). Давайте переместим операторы console.log за пределы функции и поместим их сразу после вызова функции.
let globalLet = "This is a global variable" ; function fun() { let localLet = "This is a local variable" ; }fun(); console.log(globalLet); // This is a global variable console.log(localLet); // localLet is not defined |
Выход: 
Мы все еще можем видеть значение глобальной переменной, но для локальной переменной console.log выдает ошибку. Это связано с тем, что теперь операторы console.log присутствуют в глобальной области видимости, где они имеют доступ к глобальным переменным, но не могут получить доступ к локальным переменным.
Предупреждение: всякий раз, когда вы объявляете переменные, всегда используйте префикс let. Если вы не используете ключевое слово let, переменные по умолчанию создаются в глобальной области. Например, в приведенном выше примере давайте просто удалим ключевое слово let перед объявлением localLet.
let globalLet = "This is a global variable"; function fun() { localLet = "This is a local variable";} fun(); console.log(globalLet); // This is a global variable console.log(localLet); // This is a local variable |
Выход:
Теперь мы можем также занести в console.log локальную переменную, потому что localLet был создан в глобальной области видимости, поскольку мы пропустили ключевое слово let при его объявлении. На самом деле произошло то, что, поскольку мы не использовали ключевое слово let, JavaScript сначала искал localLet в локальной области видимости, а затем в глобальной. Поскольку глобальной переменной с таким именем не существовало, была создана новая глобальная переменная.
Один из наиболее часто задаваемых вопросов в интервью - это сценарий, в котором глобальная и локальная переменные имеют одно и то же имя. Посмотрим, что будет потом.
let globalLet = "This is a global variable" ; function fun() { let globalLet = "This is a local variable" ;}fun();console.log(globalLet); // This is a global variable |
Выход: 
В этом примере мы объявили как локальную, так и глобальную переменную globalLet. Здесь важна область, в которой мы получаем к ней доступ. В приведенном выше примере мы обращаемся к нему в глобальной области видимости, поэтому он будет выводить глобальную переменную, поскольку локальная переменная отсутствует в его области. Давайте переместим оператор console.log внутрь функции fun ().
let globalLet = "This is a global variable" ; function fun() { let globalLet = "This is a local variable" ; console.log(globalLet); // This is a local variable}fun(); |
Выход: 
Внутри функции fun () доступны как локальные, так и глобальные переменные. Но когда мы console.log переменную globalLet, сначала JavaScript пытается найти локальную переменную в текущей области. Он находит локальную переменную и выводит ее. В противном случае он будет искать переменную globalLet во внешней области (которая в данном случае является глобальной).
Что, если мы хотим получить здесь доступ к глобальной переменной вместо локальной. Что ж, на помощь приходит оконный объект. Все глобальные переменные привязаны к объекту окна, и поэтому мы можем получить доступ к имени глобальной переменной, как показано в примере ниже.
let globalLet = "This is a global variable" ; function fun() { let globalLet = "This is a local variable" ; console.log(window.globalLet); // This is a global variable}fun(); |
Выход:
После обсуждения областей видимости в JavaScript, угадать результат нижеприведенных фрагментов кода должно быть легкой прогулкой.
function fun(){ function fun2(){ i = 100; } fun2(); console.log(i); // 100}fun(); |
Выход: 
function fun(){ function fun2(){ let i = 100; } fun2(); console.log(i); // i is not defined}fun(); |
Выход: 
В первом примере, поскольку мы не использовали ключевое слово let, предполагалось, что переменная «i» объявлена в глобальной области видимости, и поэтому на выходе было 100. Во втором примере «i» стала локальной переменной и, следовательно, не была доступный за пределами этой функции.
Давайте посмотрим на другой пример -
function fun(){ if ( true ){ let i = 100; } console.log(i); // i is not defined}fun(); |
Выход:
После ES2015 мы начали использовать let вместо var для объявления переменных, а теперь блок if также считается областью блока, поэтому в приведенном выше примере мы получаем ошибку вместо значения 100. Если мы изменим let на var, мы получит 100 в качестве вывода, как если бы блок ранее не считался областью действия блока, а были только функции.
Об авторе:
«Харшит является энтузиастом технологий и проявляет большой интерес к программированию. Он имеет степень бакалавра технических наук. получил степень в области компьютерных наук в JIIT, Нойда, и в настоящее время работает Front-end разработчиком в SAP. Он также является игроком в настольный теннис государственного уровня. Кроме того, он любит расслабляться, просматривая фильмы и английские комедийные сериалы. Он базируется в Дели, и вы можете связаться с ним по адресу https://in.linkedin.com/pub/harshit-jain/2a/129/bb5.
Если вы также хотите продемонстрировать здесь свой блог, пожалуйста, посетите GBlog, где вы можете писать в гостевом блоге на GeeksforGeeks.