Иногда бывает сложно понять концепцию области видимости в javascript, но я постараюсь упростить вам задачу. Поняв эту концепцию, вы сможете писать более чистый и менее подверженный ошибкам код.

Область видимости в JavaScript относится к текущему контексту переменных, функций и объектов в коде и определяет их доступность в коде во время выполнения.
Эта область определяется на основе переменной JavaScript var, let and const. и где мы их объявляем. Каждая переменная интерпретируется в коде по-разному и поэтому дает разные результаты.

В основном существует четыре типа областей действия в javascript.
1. Глобальные переменные области действия.
2. Локальные или функциональные переменные области действия.
3. Переменные области действия уровня оператора.
> 4. Лексические переменные области видимости.

Давайте разберемся с каждой из областей по отдельности с помощью кода в качестве примеров.

Глобальный масштаб

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

var gScope =7;  //gScope declared as global variable using var. 
console.log('gScope', gScope);
function check(){
 console.log('gScope', gScope);  // output:7
}
check();

Локальная область

Также называется областью действия на функциональном уровне. Переменная с локальной областью действия — это переменная, которая представляет внутри блока кода в основном функции. Они доступны для части кода (внутри функции, которую они объявляют) в основном в том контексте, в котором они объявлены. В двух словах, Local Scope существует до тех пор, пока ваши функции вызываются и выполняются.

function check(){
 var lScope =8;    //declared as local variable
 console.log('lScope', lScope);  // output: 8
}
console.log('lScope', lScope);  //Error: lScope is not defined
check();

Уровень инструкцииОбласть действия

Появившаяся в ES6 область уровня блока — это место, где переменная может быть прочитана внутри этого оператора. Операторы блока, такие как условия if и switch или циклы for и while, являются примерами этих типов области действия. Переменные, определенные внутри инструкции блока, останутся в той области, в которой они уже были. Вы можете объявить их с помощью ключевого слова let and const .

function check() {
// We used Let insted of var for statement level scoping
for (let i = 0; i < 3; i++) {
 console.log('blockScoped', i);   //output: 0 1 2
}
console.log('blockScoped', i);  //Error: lScope is not defined
}
check();
// We can use const also but not var.

Лексическая область

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

function check() {
let lexScope = 20;
function inside() {
 console.log('lexScope', lexScope), //output: 20
}
 inside();
}
check();
// We can use var and const also but need to be care full on the basis of staement level scoping.

ПРИМЕЧАНИЕ. Хостинг и закрытие также являются очень важными понятиями для правильного понимания области действия. Я попытаюсь объяснить подъем и закрытие в своих следующих статьях, так как в этой это станет довольно сложным.

Надеюсь, это поможет вам легко понять концепцию.