Что такое Closures в JavaScript?

Closures в JavaScript

Closure (замыкание) — функция, которая имеет доступ к переменным из внешней области видимости, даже после завершения внешней функции.

Основной пример

function outer() {
  const message = 'Hello';
  return function inner() {
    console.log(message);
  };
}

const greet = outer();
greet(); // 'Hello'

Почему это работает?

Scope Chain: каждая функция помнит переменные из родительской области видимости. Когда inner вызывается, она всё ещё имеет доступ к message из outer.

Практические применения

1. Приватные переменные

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
// count недоступна напрямую

2. Data Privacy в классах

function createBankAccount(balance) {
  return {
    deposit: (amount) => balance += amount,
    withdraw: (amount) => balance -= amount,
    getBalance: () => balance
  };
}

3. Function Factories

function createMultiplier(multiplier) {
  return (n) => n * multiplier;
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

4. Callbacks и Event Handlers

const buttons = document.querySelectorAll('button');
buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    console.log(`Button ${index} clicked`);
  });
});

5. Module Pattern

const Calculator = (function() {
  let history = [];
  
  return {
    add: (a, b) => {
      const result = a + b;
      history.push({ operation: 'add', a, b, result });
      return result;
    },
    getHistory: () => history
  };
})();

6. Memoization (Caching)

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) return cache[key];
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

const memoizedExpensive = memoize((n) => n * n * n);
memoizedExpensive(5); // вычисляет
memoizedExpensive(5); // из кэша

Проблема: var в циклах

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Выведет: 3, 3, 3 (одна i для всех функций)

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Выведет: 0, 1, 2 (каждый let создаёт closure)

Memory Leaks

Closure может хранить в памяти большие объекты. Если функция больше не используется, объекты могут занимать память.

function createProcessor(hugeData) {
  // hugeData будет в памяти пока функция существует
  return () => hugeData[0];
}

Заключение

Closures — фундаментальная концепция JavaScript:

• ✅ Создаются автоматически
• ✅ Позволяют приватные переменные
• ✅ Используются в callbacks, HOF, модулях
• ✅ Важны для async операций
• ⚠️ Могут вызвать memory leaks