You are currently viewing Понимание областей переменных в JavaScript

Понимание областей переменных в JavaScript

В JavaScript существует два типа областей

  1. Глобальная область действия – Область действия за пределами самой внешней функции, прикрепленной к окну.
  2. Локальная область – Внутри выполняемой функции.

Давайте посмотрим на приведенный ниже код. У нас есть глобальная переменная, определенная в первой строке глобальной области. Тогда у нас есть локальная переменная, определенная внутри функции 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(), вывод показывает, что как глобальные, так и локальные переменные доступны внутри функции, поскольку мы можем использовать консоль.зарегистрируйте их. Это показывает, что внутри функции у нас есть доступ как к глобальным переменным (объявленным вне функции), так и к локальным переменным (объявленным внутри функции). Давайте передвинем консоль.регистрируйте операторы вне функции и помещайте их сразу после вызова функции.

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

Вывод:

Мы все еще можем видеть значение глобальной переменной, но для консоли локальной переменной.журнал выдает ошибку. Это потому, что теперь консоль.операторы журнала присутствуют в глобальной области, где они имеют доступ к глобальным переменным, но не могут получить доступ к локальным переменным.

Слово предостережения: Всякий раз, когда вы объявляете переменные, всегда используйте префикс 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

Выход:

Теперь мы можем утешить.также зарегистрируйте локальную переменную, потому что локальный набор был создан в глобальной области, поскольку мы пропустили ключевое слово let при его объявлении. На самом деле произошло то, что, поскольку мы не использовали ключевое слово let, JavaScript сначала искал локальный набор в локальной области, а затем в глобальной области. Поскольку не существовало глобальной переменной с таким именем, она создала новую глобальную переменную.
Одним из наиболее часто задаваемых вопросов в интервью является сценарий, в котором глобальная и локальная переменные имеют одно и то же имя. Давайте посмотрим, что произойдет потом.

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”. Что здесь имеет значение, так это область, в которой мы получаем к нему доступ. В приведенном выше примере мы обращаемся к нему в глобальной области, поэтому он выведет глобальную переменную, поскольку локальная переменная отсутствует в его области.Давайте передвинем консоль.инструкция журнала внутри функции 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 () доступны как локальные, так и глобальные переменные. Но когда мы утешим.войдите в переменную globalLet, сначала JavaScript пытается найти локальную переменную в текущей области. Он находит локальную переменную и выводит ее. В противном случае ему пришлось бы искать переменную “globalLet” во внешней области (которая в данном случае является глобальной областью).

Что делать, если мы хотим получить доступ к глобальной переменной вместо локальной здесь. Что ж, оконный объект приходит нам на помощь. Все глобальные переменные прикреплены к объекту window, и таким образом мы можем получить доступ к имени глобальной переменной, как показано в примере ниже.

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. Во втором примере “я” стал локальной переменной и, следовательно, был недоступен за пределами этой функции.

Давайте рассмотрим другой пример:

function fun(){
	if(true){
		let i = 100;
	}
	console.log(i); // i is not defined
}
fun();

Выход:

После ES2015 мы начали использовать let вместо var для объявления переменных, а также теперь блок if также считается областью действия блока, поэтому в приведенном выше примере мы получаем ошибку вместо значения 100. Если мы изменим let на var, мы получим 100 в качестве вывода, как если бы блок ранее не рассматривался как область действия блока, а только функции.