Если вы когда-нибудь писали код на JavaScript, то наверняка сталкивались с замыканиями. Но что это такое? Звучит сложно, но на самом деле это просто механизм, который позволяет функции «запоминать» переменные из места своего создания. Сегодня разберём, как замыкания помогают строить модульные приложения, и почему без них никуда.

Digital-студия WNDER

Что такое замыкание? Простыми словами

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

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

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Здесь функция, возвращаемая из makeCounter, «запомнила» переменную count. Даже после того как makeCounter завершилась, счётчик продолжает работать. Это и есть замыкание.

Зачем нужны замыкания в модульных приложениях?

Модульность — это когда код разбит на независимые части, которые можно легко переиспользовать и поддерживать. В JavaScript замыкания — это один из главных инструментов для создания таких модулей. Они позволяют скрывать внутренние детали реализации и предоставлять наружу только нужный интерфейс.

Представьте, что вы пишете библиотеку для работы с корзиной интернет-магазина. Вам нужно хранить список товаров, но при этом не давать пользователям напрямую менять его. С помощью замыканий вы можете создать модуль, который хранит состояние внутри себя и предоставляет только методы для добавления и удаления товаров.

const cart = (function() {
  let items = [];

  function addItem(item) {
    items.push(item);
  }

  function removeItem(id) {
    items = items.filter(item => item.id !== id);
  }

  function getItems() {
    return items.slice(); // возвращаем копию, чтобы нельзя было изменить извне
  }

  return {
    addItem,
    removeItem,
    getItems
  };
})();

cart.addItem({ id: 1, name: 'Книга' });
cart.addItem({ id: 2, name: 'Кофе' });
console.log(cart.getItems()); // [{ id: 1, name: 'Книга' }, { id: 2, name: 'Кофе' }]

Здесь переменная items доступна только внутри модуля. Внешний код не может напрямую изменить массив — только через методы. Это защищает целостность данных и делает код надёжнее.

Как замыкания помогают избегать глобальных переменных

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

Сравните два подхода:

Без замыканий (глобальные переменные) С замыканиями (модуль) 
let counter = 0;
function increment() {
  counter++;
}
function getCounter() {
  return counter;
}
 
const counterModule = (function() {
  let counter = 0;
  function increment() {
    counter++;
  }
  function getCounter() {
    return counter;
  }
  return { increment, getCounter };
})();

Во втором случае переменная counter скрыта внутри модуля. Никто не сможет случайно её изменить. Это особенно важно, когда над проектом работает несколько разработчиков.

Практические советы по использованию замыканий

Вот несколько лайфхаков, которые я накопил за годы работы:

  • Используйте IIFE (Immediately Invoked Function Expression) — это функция, которая вызывается сразу после объявления. Она помогает создавать модули без лишних глобальных переменных.
  • Не забывайте про утечки памяти — если замыкание хранит ссылки на большие объекты, они не будут удалены сборщиком мусора. Это может замедлить приложение.
  • Используйте замыкания для создания приватных методов — это как «секретные» функции, которые доступны только внутри модуля.
  • Не злоупотребляйте вложенностью — слишком глубокие замыкания усложняют чтение кода. Лучше выносить логику в отдельные функции.
Правило: Если вы заметили, что в коде появляется слишком много глобальных переменных — это сигнал, что пора использовать замыкания для создания модулей.

Сравнение замыканий с другими подходами

Кроме замыканий, в JavaScript есть и другие способы организации модульности, например классы или ES-модули. Давайте сравним их.

Подход Плюсы Минусы
Замыкания Простота, приватность, не требует сборки Трудно тестировать, если не аккуратно
Классы Привычный синтаксис, поддержка наследования Приватные поля не всегда поддерживаются
ES-модули Стандарт, удобно для больших проектов Требуют сборки, не работают в старых браузерах

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

Что в итоге

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

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

Студия WNDER