Простими словами, скоуп визначає область видимості та доступу до змінних. Розглянемо такий приклад:
const x = 1;
const fn = () => {
const y = 2;
};
if(true) {
const z = 3;
}
На цьому коді зображено три види скоупу в js.
💛 Змінні "x" та "fn" є глобальними, вони оголошені в глобальному скоупі (global scope) і доступні в будь-якому місці програми.
💛 Змінна "y" оголшена в скоупі, який був створений функцією fn (function scope), вона є “локальною” для функції fn і доступна тільки в її контексті.
💛 Змінна "z" доступна тільки в if блоку (block scope).
Якщо ми спробуємо дістатися змінної 'z' (яка оголошена в скоупі if блоку) зовні цього блоку - отримаємо reference error. Якщо ж ми спробуємо дістатися змінної 'x' у функції fn, вона буде доступна, незважаючи на те, що не була оголошена в скоупі функції. Для цього в js є механізм variable lookup.
Const x = 1;
Const fn = () => console.log(x)
Спочатку js подивиться в скоуп функції fn і намагатиметься знайти 'х' тут. Коли не знайде, js буде дивитися на один скоуп вище (на прикладі це вже глобальний скоуп). Тут він знайде змінну 'х' та виведе її в консоль.
Такий механізм доступу до змінних називається лесичний скоупом (lexical scope). Тобто доступ до змінної визначається місцем її оголошення в тексті програми. Лексичний скоуп визначається на етапі компіляції програми.
Для загального розвитку, є ще альтернатива лексичному скоупу - динамічний скоуп. В ньому доступ до змінної визначається не місцем в коді, а місцем виклику. Динамічний скоуп визначається на етапі виконання програми. В js не реалізовано динамічного скоупу, приклад його реалізації є, наприклад, в мові perl.