Что такое лексическая область видимости (Lexical Scoping) в JavaScript?

1. Определение

Лексическая область видимости (Lexical Scoping) — это принцип, по которому область видимости переменной определяется во время написания кода, а не во время выполнения.

Другими словами, функции "запоминают" место своего объявления и получают доступ к переменным из внешних областей, даже если вызываются в другом контексте.

2. Как это работает?

Простой пример

function outerFunction() {
    let outerVariable = "Я из внешней функции";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample();  // "Я из внешней функции"

Что здесь происходит?

• innerFunction объявлена внутри outerFunction, поэтому получает доступ к outerVariable.
• closureExample() вызывается вне outerFunction, но всё равно "помнит" outerVariable.
• Это возможно благодаря лексической области видимости и замыканию.

3. Лексическая область видимости и вложенные функции

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

function parentFunction() {
    let parentVar = "Привет из родительской функции";

    function childFunction() {
        let childVar = "Привет из дочерней функции";
        console.log(parentVar);  // Доступ разрешён
    }

    childFunction();
    console.log(childVar);  // Ошибка: переменная не определена
}

parentFunction();

Вывод:

• childFunction() видит parentVar, потому что ищет переменную вверх по цепочке областей видимости.
• parentFunction() не видит childVar, потому что область дочерней функции закрыта от внешнего кода.

4. Лексическая область видимости и цепочка поиска

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

let globalVar = "Я глобальная переменная";

function firstLevel() {
    let firstVar = "Я на первом уровне";

    function secondLevel() {
        let secondVar = "Я на втором уровне";

        console.log(secondVar);  // "Я на втором уровне"
        console.log(firstVar);   // "Я на первом уровне"
        console.log(globalVar);  // "Я глобальная переменная"
    }

    secondLevel();
}

firstLevel();

Как JavaScript ищет переменные?

5. Почему это важно?

Лексическая область видимости позволяет:

• Использовать замыкания
• Создавать приватные переменные
• Обеспечивать модульность и безопасность кода
• Оптимизировать работу с памятью

Пример с приватной переменной:

function counter() {
    let count = 0;

    return function () {
        count++;
        console.log(count);
    };
}

const myCounter = counter();
myCounter();  // 1
myCounter();  // 2

Переменная count недоступна извне, но сохраняется внутри замыкания.

6. Заключение

Лексическая область видимости — это то, как JavaScript определяет доступ к переменным по месту их объявления, а не вызова.
Функции "помнят" свою область видимости, даже если вызываются в другом месте.
Поиск переменных идёт снизу вверх — сначала в текущей функции, потом в родительских, затем в глобальной области.
Используется в замыканиях, приватных переменных и модульном программировании.

Понимание лексической области видимости — ключ к продвинутому JavaScript.