Що таке область видимості?

Повне пояснення

Що це і навіщо Область видимості (scope) визначає, де в коді можна звертатися до певної змінної. Це запобігає конфліктам і помилкам, забезпечуючи ізоляцію даних.

Ключові принципи

• Лексичний (статичний) scope: область визначається місцем оголошення, а не моментом виконання.
• Глобальний scope: доступний у всьому скрипті.
• Функціональний scope: створюється при виклику функції; у ES6 var має функціональний scope, а let/const – блочний.
• Блочний scope: застосовується до let і const у {}.

Як це працює При зверненні до імені JS‑движок шукає його в поточному scope, а якщо не знаходить – переходить до батьківського. Якщо імені немає, виникає ReferenceError.

Практика та реалізація

function foo() {
  let a = 1; // блочний scope
  if (true) {
    const b = 2; // новий блочний scope
    console.log(a + b); // 3
  }
}
foo();

Тестування

import { describe, it } from 'vitest';
describe('scope', () => {
  it('should not access inner var from outer', () => {
    function test() { let x = 5; return x; }
    expect(test()).toBe(5);
  });
});

Особливості в контексті JS Core

• var піднімається (hoisting) до верхньої частини функції.
• let і const не піднімаються, але доступні після оголошення.
• У модулях ES6 глобальний scope обмежений модулем, а не вікном.

Оптимізація та типові помилки

• Не використовуйте var у новому коді; він створює непередбачувані лексичні області.
• Уникайте «замикання» (closures) без потреби, бо це збільшує пам’яттю.
• Перевіряйте наявність змінної перед використанням, щоб уникнути ReferenceError.

Диагностика

• Якщо змінна не знайдена, перевірте оголошення і порядок підняття.
• Якщо змінна доступна, але має неправильне значення, перевірте замикання і асинхронність.

Часті помилки (8)

1. Використання var замість let/const.
2. Доступ до змінної перед оголошенням (ReferenceError).
3. Перекриття імен у вкладених функціях.
4. Неочікуване підняття var в глобальному scope.
5. Зміна значення через замикання у циклі for без let.
6. Втрата контексту this у колбеках без .bind().
7. Неочікуване використання eval з глобальним scope.
8. Залишені «заглушки» (console.log) у продакшн‑коді.

Cheatsheet

• var – функціональний scope, піднімається.
• let, const – блочний scope, не піднімаються.
• Модуль ES6 має власний глобальний scope.

Follow‑up питання

• Як працює «замикання» у JS?
• Чому var піднімається, а let/const ні?