Раскрываем Области Видимости JavaScript

Введение:

Области видимости — одно из фундаментальных понятий JavaScript. Многие разработчики сталкиваются с проблемой понимания поведения переменных.

Если вы тоже сталкиваетесь с этой проблемой, не волнуйтесь! Вы находитесь в правильном месте!

В этом блоге мы рассмотрим, что такое область видимости и какие существуют ее типы с примерами.

Что такое область видимости?

Область видимости в JavaScript относится к текущему контексту кода, который определяет доступность переменных в JavaScript.

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

Не поняли?

Не волнуйтесь!

Давайте разберемся в этом с помощью примеров.

var Hero = 'Iron Man';

function Wish() {
	console.log(`My Favourite hero is ${Hero}`);
	var Villain = 'Thanos';
}
Wish(); //Invokes the function
console.log(`I was scared of ${Villain}`);

Итак, какой будет результат выполнения этого кода?

// My Favourite hero is Iron Man
// Uncaught ReferencaeError: Villain is not defined

Почему же появляется сообщение “Villain не определен”, несмотря на то, что мы объявили эту переменную? Вот где в игру вступает скоуп.

Позвольте мне объяснить, почему это происходит. Мы определили переменную Villain с помощью функции, поэтому область видимости этой переменной ограничена функцией, что означает, что мы можем обратиться к переменной только внутри этой функции.

Типы областей видимости

В JavaScript существует три основных типа областей видимости:

Глобальная область видимости:

Если переменная объявлена вне функции, то у нее глобальная область видимости. К ней можно обратиться из любой части вашего кода на JavaScript.

let name = 'Arindam'; // global scope

function func1() {
	console.log(name); // Arindam
}

function func2() {
	console.log(name); // Arindam
}

Область видимости функции:

Переменная, объявленная внутри функции, имеет область видимости функции. К ней можно обратиться только из этой функции.

function func1() {
	let name = 'Ronaldo'; // function scope

	console.log(name); // Ronaldo
}

console.log(name); // Throws a ReferenceError

Область видимости блока:

Если вы объявляете переменную с помощью let и const, она доступна только в пределах блока, в котором она объявлена - между фигурными скобками { }. Давайте разберем это на примерах:

{
	let name = 'Roni';
}

console.log(name); // Throws a ReferenceError

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

Теперь перейдем к следующему примеру.

{
	var name = 'Messi';
}

console.log(name);

Каков будет вывод здесь?

Неопределенный??

Нет, вывод будет “Messi”. Это происходит потому, что переменная, определенная с ключевым словом var, не имеет блочной области видимости.

💡 Примечание: Var имеет ’область видимости функции’, в то время как let и const имеют ‘блочную область видимости’.

Заключение:

Если вы нашли этот блог полезным, пожалуйста, подумайте о том, чтобы поделиться им с другими, кому он может пригодиться. Вы также можете следить за мной, чтобы получать больше контента по JavaScript и другим темам веб-разработки.

Спасибо за чтение :)

Поделиться: