Область видимості

JavaScriptJunior~2 хв читання

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.