Область видимости переменной в JS

В этой статье вы познакомитесь с понятием области видимости переменных в JavaScript.

Область видимости — это доступность переменных и функций в определенных частях кода.

В JavaScript, как и в большинстве языков программирования, два типа области видимости:

• Глобальная область видимости.
• Локальная область видимости.

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

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

Рассмотрим пример:

let a = "привет";

function greet () {
    console.log(a);
}

greet(); // вывод: привет

Здесь переменная a объявлена в верхней части программы (вне функции), она является глобальной переменной. Это означает, что a можно использовать в любом месте программы.

Можно использовать внутри функции

Глобальные переменные можно использовать в том числе внутри функций. Давайте изменим значение глобальной переменной a внутри функции greet():

let a = "привет";

function greet() {
    a = 3;
}

// до вызова функции greet()
console.log(a); // вывод: привет

greet();

// после вызова функции greet()
console.log(a); // вывод: 3

Сначала значение глобальной переменной a равно привет. Затем мы обращаемся к переменной a внутри функции, и меняем ее значение на 3.

Как мы видим, значение a действительно меняется после соответсвующих действий внутри функции. 

Примечание. Следует как можно реже использовать глобальные переменные, поскольку их значение может меняться в разных местах программы. Из-за этого труднее предсказать логику работы программы — могут вылезти неожиданные результаты.

Переменная без объявления → глобальная

В JavaScript переменную можно использовать и без объявления. В таком случае она автоматически становится глобальной переменной.

function greet() {
    // переменная используется в функции без объявления
    // значит, она становится глобальной
    a = "привет"  
}

greet();

console.log(a); // вывод: привет

Если здесь мы попытаемся объявить переменную с помощью let a = "привет", программа выдаст ошибку.

Примечание. В JavaScript существует «строгий режим» (strict mode), который не позволяет использовать переменную без объявления. Подробнее об этом режиме можно почитать в официальной документации.

Локальная область видимости

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

let a = "привет";

function greet() {
    let b = "Мир"
    console.log(a + b);
}

greet();
console.log(a + b); // ошибка

Вывод:

приветМир
Uncaught ReferenceError: b is not defined

В это примере переменная a — глобальная, а переменная b — локальная. Доступ к переменной b возможен только внутри функции greet(). Поэтому, когда мы пытаемся получить доступ к переменной b вне функции, возникает ошибка.

let → блочная область видимости

Ключевое слово let создает переменную с блочной областью видимости. Это значит, что получить доступ к переменной можно только непосредственно в блоке, в котором она объявлена. 

// глобальная переменная
let a = 'Привет';

function greet() {

    // локальная переменная
    let b = 'Мир';

    console.log(a + ' ' + b);

    if (b == 'Мир') {

        // переменная с блочной областью видимости
        let c = 'привет';

        console.log(a + ' ' + b + ' ' + c);
    }

    // здесь нельзя получить доступ к переменной c →  ошибка
    console.log(a + ' ' + b + ' ' + c);
}

greet();

Вывод:

Привет Мир
Привет Мир привет
Uncaught ReferenceError: c is not defined

Разберемся

• a — глобальная переменная. К ней можно обратиться в любом месте программы.
• b — локальная переменная. Доступ к ней возможен только внутри функции greet().
• c — переменная с блочной областью видимости. Доступ к ней возможен только внутри блока оператора if.

Поэтому первые два console.log() работают без проблем, а третий — уже нет. 

В третьем console.log() мы пытаемся получить доступ к переменной c вне блока, в котором она объявлена. Это приводит к ошибке.

Примечание. В JavaScript переменная, объявленная с помощью var, относится к функциям, а с помощью let — к блокам. Если вы попытаетесь использовать var c = 'привет'; внутри оператора if в приведенной выше программе, программа будет работать, но c уже будет локальной переменной.