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

В JavaScript такая же ситуация: когда функция запоминает переменные из своей области видимости, даже если выполняется вне этой области, это называется замыканием (closure).

Небольшой пример:

function createGreeting(name) {
    return function() {
        console.log(`Привет, ${name}!`);
    };
}

const greetElle = createGreeting("Элли");
greetElle(); // "Привет, Элли!"

const greetAnna = createGreeting("Анна");
greetAnna(); // "Привет, Анна!"

Тут функция createGreeting получает name и возвращает новую функцию, которая просто выводит:

Привет, ${name}!.

Когда мы вызываем createGreeting(“Elle”), переменная name сохраняется внутри.

Даже после завершения createGreeting, вызов greetElle() все еще «помнит» имя “Элли”.

JavaScript устроен так, что если внутренняя функция использует переменные из внешней области видимости, движок их не удаляет.

Посмотрим как выглядят замыкания в JavaScript под капотом

Чтобы лучше понять, как JavaScript хранит данные, посмотрим на небольшой кусочек кода:

function counter() {
    let count = 0; 
    // Переменная внутри функции

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

const myCounter = counter();
myCounter(); // 1
myCounter(); // 2
myCounter(); // 3

Хотя counter() выполнилась, переменная count не исчезает, потому что внутренняя функция на нее ссылается. Это и есть замыкание: функция «захватила» переменную count, и она остается в памяти.

Чаще всего замыкания используются в создании приватных переменных, в обработчиках событий (onclick, setTimeout) и в кэшировании вычислений.

Замыкание – это механизм, позволяющий функциям «запоминать» переменные даже после завершения их родительской функции. Это мощный инструмент, который делает JavaScript гибким и удобным.