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

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

Допрацюйте відповідь до «Scope chain (ланцюжок областей видимості)». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Що таке **Scope Chain** (ланцюжок областей видимості)

**Ланцюжок областей видимості** - це механізм, за допомогою якого JavaScript **знаходить змінні**.
Коли код звертається до змінної, рушій шукає її **в поточній області видимості**, а якщо не знаходить, йде **"вгору по ланцюжку"**, до батьківських областей.

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

> Scope chain - це ланцюжок посилань на зовнішні лексичні оточення, через які рушій шукає змінні.

## Як це працює

Кожна функція в JS створює **своє лексичне оточення (Lexical Environment)**.
І в цьому оточенні зберігається **посилання на зовнішнє оточення**, тобто на те місце, де функцію було **оголошено**, а не викликано.

Саме ці посилання і утворюють **ланцюжок областей видимості**.

## Приклад 1: проста ланцюжок

```javascript
let a = 10;

function outer() {
  let b = 20;

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

inner();
}

outer();
```

Що станеться при виклику `inner()`:

| Рівень | Що доступно | Де шукає змінні |
|---|---|---|
| **inner()** | `c = 30` | Спочатку шукає `c` -> знайшов |
| **outer()** | `b = 20` | Шукає `b` -> знайшов |
| **global** | `a = 10` | Шукає `a` -> знайшов |

Ланцюжок виглядає так:

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

Якби ми написали `console.log(d)`, пошук пройшов би весь ланцюжок і закінчився б помилкою:

```javascript
ReferenceError: d is not defined
```

## Приклад 2: замикання

```javascript
function outer() {
  const outerVar = 'outside';

return function inner() {
    console.log(outerVar);
  };
}

const fn = outer();
fn();
```

Тут функція `inner` **запам'ятала посилання** на своє зовнішнє оточення `outer`, і це теж частина ланцюжка областей видимості.

Ланцюжок:

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

Завдяки цьому працює **замикання (closure)** - коли внутрішня функція отримує доступ до змінних зовнішньої, навіть після її завершення.

## Приклад 3: змінні з однаковими іменами

```javascript
let x = 1;

function foo() {
  let x = 2;

function bar() {
    let x = 3;
    console.log(x);
  }

bar();
}

foo();
```

Вивід:

```javascript
3
```

Чому:

- JS шукає `x` у поточному контексті `bar` -> знайшов `x = 3`.
- Далі по ланцюжку (`foo`, `global`) не йде, тому що вже знайшов збіг.

## Підсумок

| Термін | Опис |
|---|---|
| **Scope (область видимості)** | Набір змінних, доступних у конкретній частині коду |
| **Lexical Environment** | Внутрішній об'єкт, де зберігаються змінні і посилання на зовнішнє оточення |
| **Scope Chain** | Ланцюжок усіх лексичних оточень, через які рушій шукає змінні |

## Візуально

```javascript
[ Global Scope ]
   ^
[ outer() Scope ]
   ^
[ inner() Scope ]
```

Якщо `inner` не знаходить змінну, йде вгору по стрілці, поки не знайде або не дійде до глобального контексту.

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

Для рев’юера

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

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