Область видимости определяет видимость или доступность переменной или другого ресурса в области вашего кода.

В JavaScript область видимости определяет, к каким переменным у вас есть доступ. В javascript есть два типа области действия
1. локальная область действия.
2. глобальная область действия.

Локальный охват:

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

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

В JavaScript существует два типа локальной области видимости:
область действия и область действия блока.

Объем функции:

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

function foo(){
    var fruit ='orange';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: orange
console.log(fruit);       //error: fruit is not defined

Объем блока:

Когда вы объявляете переменную с const или let в фигурной скобке ({}), вы можете получить доступ к этой переменной только в этой фигурной скобке.

function foo(){
    if(true){
        var fruit1 = 'orange';        //exist in function scope
        const fruit2 = 'pineapple';  //exist in block scope
        let fruit3 = 'banana';      //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//orange
//error: fruit2 is not defined
//error: fruit3 is not defined

Глобальный охват:

Если переменная объявлена ​​вне всех функций или фигурных скобок ({}), считается, что она определена в глобальной области.

//global scope
var fruit = 'orange'
console.log(fruit);        //orange

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //orange