Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Лексична область видимості в JavaScript». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке лексична область видимості (Lexical Scope)

**Лексична область видимості** - це область, визначена **розташуванням коду в момент його написання**, а не під час виконання.

Простіше кажучи:

> Яка функція має доступ до яких змінних, вирішується **на етапі оголошення**, а не виклику.

---

## Чому називається *лексична*

Слово "лексична" (від англ. *lexical*) означає "така, що стосується тексту програми".
Тобто JS "запам'ятовує" розташування функцій і блоків коду **під час парсингу**, коли читає вихідний код, а не коли ти викликаєш функції.

---

## Приклад 1: Просте вкладення

```javascript
let a = 10;

function outer() {
  let b = 20;

function inner() {
    let c = 30;
    console.log(a, b, c);
  }

inner();
}

outer();
```

Тут:

- `inner` була **оголошена всередині** `outer`.
- Тому вона має доступ до змінних `outer` і `global`.

JS запам'ятав структуру **при оголошенні**, а не при виклику.

Ланцюжок областей видимості:

```javascript
inner -> outer -> global
```

---

## Приклад 2: Різниця між "лексичною" і "динамічною" областю

Деякі мови (наприклад, Bash чи старий Lisp) використовують **динамічну область видимості** - вона визначається **тим, хто викликав функцію**.

У JavaScript - **лексична**: вона визначається **тим, де функцію написано**.

```javascript
let x = "глобальний";

function foo() {
  console.log(x);
}

function bar() {
  let x = "локальний";
  foo(); // хто викликав foo? bar, але...
}

bar();
```

Результат:

```javascript
глобальний
```

Тому що `foo` *оголошена* в глобальній області - і JS шукає `x` там,
а не в місці, звідки її викликали (`bar`).

> Це і є суть лексичної області: "шукай там, де функцію написано, а не де викликано".

---

## Приклад 3: Замикання - практичний прояв лексичної області

```javascript
function makeCounter() {
  let count = 0;

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

const counter = makeCounter();
counter(); // 1
counter(); // 2
```

Тут:

- внутрішня функція **запам'ятала лексичну область** `makeCounter`
- і навіть після її завершення все ще "бачить" `count`.

Це можливо тільки тому, що область видимості - **лексична**, а не динамічна.

---

## Візуально

```javascript
[ Global Scope ]
   a = 10
   ↓
[ outer() Scope ]
   b = 20
   ↓
[ inner() Scope ]
   c = 30
```

Функція `inner` завжди "знає", де шукати `a` і `b` - це визначено **на етапі оголошення**.

---

## Підсумок

| Поняття | Опис |
|---|---|
| **Лексична область видимості** | Область, де функція "бачить" змінні, визначена розташуванням у вихідному коді |
| **Визначається коли** | Під час *написання коду*, а не при виконанні |
| **Навіщо потрібна** | Щоб JS знав, які змінні доступні кожній функції |
| **Пов'язано з** | Lexical Environment, Scope Chain, Closures |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати425 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.