Почему несколько вызовов функции могут ссылаться на одну и ту же переменную

Question

Несколько вызовов функции могут ссылаться на одну и ту же переменную, если эта переменная находится во внешнем лексическом окружении. Замыкание не копирует значение переменной, а сохраняет ссылку на неё. Поэтому все функции, созданные в одном окружении, работают с одним и тем же состоянием. Изменение переменной в одном месте будет видно во всех остальных.

YeaHub · Accepted Answer

ОпределениеЛексическое окружение — это внутренняя структура JavaScript, в которой хранятся переменные, доступные функции в момент её создания.Как возникает общая переменнаяВнешняя функция создаёт переменнуюВнутренняя функция использует эту переменнуюВнешняя функция завершает выполнениеПеременная не удаляется, потому что на неё есть ссылкаПример общей переменнойfunction createFn() {
  let value = 0;

return function () {
    value++;
    console.log(value);
  };
}

const fn1 = createFn();
const fn2 = fn1;

fn1(); // 1
fn2(); // 2
Почему это одна и та же переменнаяvalue создана один разfn1 и fn2 указывают на одну функциюЗамыкание содержит ссылку на одно окружениеЧастый источник баговlet shared = 0;

function inc() {
  shared++;
}

inc();
inc();
Все вызовы работают с одним состояниемБез явного контроля это может быть неожиданноВыводЗамыкания работают со ссылкой на переменную, а не с её копией. Поэтому несколько вызовов могут изменять одно и то же состояние.