Лексичне середовище в JavaScript

Що таке Лексичне Середовище?

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

Кожна функція, блок {} та глобальна область створює своє власне лексичне середовище під час виконання.

Склад Лексичного Середовища

Лексичне середовище складається з двох частин:

Запис середовища

Зберігає всі локальні змінні, функції, параметри.

Посилання на зовнішнє лексичне середовище (outer)

Вказує на зовнішнє середовище, де була створена функція (не викликана!).

Приклад

javascript

function outer() {
  let a = 1;

  function inner() {
    let b = 2;
    console.log(a + b);
  }

  inner();
}

outer();

Коли викликається outer, створюється Лексичне середовище для outer з змінною a.
Коли викликається inner, створюється Лексичне середовище для inner з змінною b, і воно має доступ до a через замикання.

Візуалізація Ланцюга Середовища

Глобальне Лексичне Середовище

LexicalEnv: outer()

LexicalEnv: inner()

Лексичне ≠ Динамічне

JavaScript використовує лексичне підсумовування, що означає:

Змінні доступні в залежності від того, де вони визначені в коді, а не де вони викликані.

javascript

let x = 10;

function log() {
  console.log(x);
}

function run() {
  let x = 20;
  log(); // ❗ Виведе 10, а не 20!
}

run();

log() пам'ятає контекст свого визначення, а не свого виклику.

Важливо:

Лексичне середовище створюється, коли функція виконується, і існує доти, поки є посилання на нього (наприклад, через замикання).

Підсумок

Лексичне середовище — це механізм для зберігання змінних у певній області видимості.
Кожна функція, блок або глобальна область має своє власне середовище.
Воно формує ланцюг області видимості, що є основою роботи областей видимості та замикань.
Розуміння Лексичного Середовища допомагає зрозуміти, як JavaScript знаходить і управляє змінними під час виконання.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Лексичне середовище в JavaScript

#Що таке Лексичне Середовище?

#Склад Лексичного Середовища

#Приклад

#Візуалізація Ланцюга Середовища

#Лексичне ≠ Динамічне

#Підсумок