Замыкания: как функция помнит своё окружение

Когда движок создаёт функцию, он не отрывает её от контекста. К функции незримо прикрепляется ссылка на то место, где она была объявлена, — на её лексическое окружение. Окружение — это набор переменных, которые были рядом в момент рождения функции.

let user = "Рико";
function greet() {
  console.log("Привет, " + user);
}
greet();

Внутри greet нет переменной user — и это не мешает. Не найдя имя у себя, функция смотрит в окружение, где была создана, затем в окружение снаружи него, и так по цепочке до самого верха. Если имени нет нигде — только тогда будет ReferenceError. Это та же цепочка, что в статье «Область видимости», — здесь у неё появляется вторая половина: окружение живёт дольше вызова.

let level = "глобальный";
function outer() {
  let extra = "внешний";
  function inner() {
    console.log(level + " + " + extra);
  }
  inner();
}
outer();

Замыкание — это функция вместе с её лексическим окружением. Отдельной «конструкции замыкания» в языке нет: в JavaScript замыканием является каждая функция, просто в большинстве случаев мы этого не замечаем.

Главное правило звучит почти как афоризм: функция ищет переменные там, где её написали, а не там, где её позвали. Вызвать её можно откуда угодно — окружение от этого не изменится.

let phrase = "снаружи";
const say = () => console.log(phrase);
function run() {
  let phrase = "внутри";
  say();
}
run();

Внутри run есть своя переменная phrase, но say о ней ничего не знает: она родилась снаружи и смотрит только в своё окружение. Такую область видимости называют лексической, или статической, — её видно прямо в тексте программы, без запуска.

Обратная сторона правила — самая полезная: функция, созданная внутри другой функции, наследует все её локальные переменные. Так получаются фабрики функций.

function multiplier(k) {
  return (x) => x * k;
}
const double = multiplier(2);
const triple = multiplier(3);
console.log(double(5), triple(5));

Самое неожиданное для новичка: внешняя функция уже завершилась, а её переменные всё ещё живы. Пока существует вложенная функция, которая на них ссылается, окружение никуда не исчезает.

function makeCounter() {
  let count = 0;
  return function () {
    return (count += 1);
  };
}
const next = makeCounter();
console.log(next(), next(), next());

Переменная count не глобальная и не «висит» на объекте — до неё вообще нельзя дотянуться снаружи. Единственный способ её изменить — вызвать функцию, которая её замкнула.

const makeTicker = () => {
  let count = 0;
  return () => (count += 1);
};
const tick1 = makeTicker();
const tick2 = makeTicker();
tick1();
console.log(tick1(), tick2());

Каждый вызов внешней функции создаёт новое окружение — поэтому два счётчика из одной фабрики считают порознь.

Классическая задача с собеседований: складываем в массив три функции внутри цикла и ждём 0, 1, 2. Получаем другое.

const callbacks = [];
for (var i = 0; i < 3; i++) {
  callbacks.push(function () {
    return i;
  });
}
console.log(callbacks[0](), callbacks[2]());

var не знает про блоки: переменная i одна на всю функцию (или на весь скрипт). Все три функции замкнули не три разных значения, а одну и ту же ячейку — а к моменту вызова цикл уже отработал и оставил в ней 3.

const jobs = [];
for (let i = 0; i < 3; i++) {
  jobs.push(() => i);
}
console.log(jobs[0](), jobs[2]());

С let на каждой итерации создаётся новая переменная i, и в неё копируется текущее значение. Три итерации — три независимых окружения, каждая функция замкнула своё. Это, пожалуй, самая практичная причина забыть про var.

const boxed = [];
for (var i = 0; i < 3; i++) {
  (function (j) {
    boxed.push(() => j);
  })(i);
}
console.log(boxed[1]());

Замыкание легко принять за трюк для собеседований, но вы пользуетесь им в каждой второй строке. Любой колбэк, который читает переменную снаружи себя, — замыкание.

const limit = 10;
const nums = [5, 12, 8, 20];
console.log(nums.filter((n) => n < limit));

Второе применение — приватные данные. Модификатора «приватно» для обычных переменных в языке нет, но замыкание даёт то же самое: наружу торчат только те функции, которые вы вернули.

function makeAccount(start) {
  let balance = start;
  return { add: (sum) => (balance += sum), get: () => balance };
}
const acc = makeAccount(100);
acc.add(50);
console.log(acc.get());
console.log(acc.balance);

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