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

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

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

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

Контент

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

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

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

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

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

## 1. Визначення

> **Область видимості функції** - це внутрішня "зона видимості", що створюється під час виклику функції.
>
> Усі змінні, оголошені за допомогою `var`, `let`, `const` або `function` всередині функції,
> **доступні лише всередині цієї функції та її вкладених функцій**.

Іншими словами:

- змінні "живуть" **тільки всередині функції**, де вони оголошені;
- ззовні їх **неможливо побачити**.

---

## 2. Приклад

```javascript
function sayHi() {
  const name = 'Богдан';
  console.log('Привіт,', name);
}

sayHi();
console.log(name); // ReferenceError: name is not defined
```

Змінна `name` доступна лише **всередині функції** `sayHi()`.
Ззовні вона не існує - тому що це **область видимості функції**.

---

## 3. Функція створює власне "лексичне оточення"

Кожен виклик функції створює **нове оточення (scope)**,
де живуть свої змінні.

```javascript
function counter() {
  let count = 0;
  return () => ++count;
}

const c1 = counter();
const c2 = counter();

console.log(c1()); // 1
console.log(c1()); // 2
console.log(c2()); // 1
```

Тут у `c1` і `c2` - **різні області видимості** з різними змінними `count`.

---

## 4. Області видимості вкладаються одна в одну

JS використовує **лексичну (статичну) область видимості** -
функція "пам'ятає", де вона оголошена, а не де викликана.

```javascript
let a = 10;

function outer() {
  let b = 20;

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

inner();
}

outer(); // 10 20 30
```

- `inner` має доступ до `a`, `b`, `c`;
- `outer` - до `a`, `b`;
- глобальна область - лише до `a`.

Це ієрархія областей видимості (scope chain).

---

## 5. Область видимості `var` vs `let` / `const`

| Оголошення | Область видимості |
|---|---|
| `var` | **Функціональна** (уся функція) |
| `let`, `const` | **Блочна** (всередині `{ ... }`) |

Приклад:

```javascript
function test() {
  if (true) {
    var x = 1;
    let y = 2;
  }
  console.log(x); // 1
  console.log(y); // ReferenceError
}
test();
```

---

## 6. Приклад "витоку" за відсутності function scope

```javascript
if (true) {
  var x = 10;
}
console.log(x); // 10 - змінна "витекла"
```

`var` не має блочної області, лише **функціональну**.
Якщо обгорнути код у функцію - все безпечно:

```javascript
function run() {
  var x = 10;
}
console.log(x); // ReferenceError
```

---

## 7. Глобальна vs локальна область видимості

| Рівень | Де видна змінна | Приклад |
|---|---|---|
| Глобальна | Скрізь у коді | `let appName = "MyApp"` |
| Функціональна | Тільки всередині функції | `function foo() { let x = 1; }` |
| Блочна | Тільки в `{}` | `if (...) { let y = 2; }` |

---

## 8. Область видимості і замикання

Замикання **використовують область видимості функції**,
щоб "захоплювати" змінні із зовнішньої області:

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

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
```

Функція "пам'ятає" область видимості, де вона створена.

---

## ПІДСУМОК

| Властивість | Опис |
|---|---|
| Що таке | Область, де видні змінні і функції |
| Коли створюється | Під час виклику функції |
| Де змінні видні | Всередині функції та вкладених функцій |
| Що не видно | Змінні ззовні функції |
| Тип області у `var` | Функціональна |
| Тип області у `let`/`const` | Блочна |
| Пов'язано з | Замиканнями, лексичним оточенням, scope chain |

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

Для рев’юера

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

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