На этом уроке разберем, что такое замыкание функции , простыми словами. Если коротко, то замыкание - это функция внутри другой функции. И правда, звучит очень просто, но без привязки к конкретной задачи, понятие "замыкание" так и останется пустым звуком. Я просто хочу знать, в каких случаях мне нужно применять эту т...

Замыкание функций в JavaScript

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

Замыкание и область видимости

Так или иначе, но все эти пляски с бубном вокруг замыканий, напрямую связаны с областью видимости. Все переменные созданные внутри функции, являются локальными. А переменные созданные вне функции - глобальными.


Пример функции с локальными переменными

function one() {
    let a = 10;
    return a * 10;
}

// Вызов функции
console.log(one()); // 100

Локальная переменная видна только внутри блока, в котором она объявлена. Если мы попытаемся обратиться к локальной переменной вне этого блока, то гарантированно получим ошибку. Поскольку переменная не находится в области видимости данной функции.

function one() {
    let a = 10;
    return a * 10;
}

// Вывод переменной
console.log(a); // a is not defined


Пример функции c глобальными переменными

let a = 10;

function one() {
    return a * 10;
}

console.log(a); // 10
console.log(one()); // 100

Совсем иначе дело обстоит с глобальными переменными, объявленными за пределами блока. Глобальные переменные доступны в любом месте в данном коде.

В чем подвох?

Драма состоит в том, что когда код разрастается или над ним работает несколько человек, становится тяжелее отслеживать логику глобальных и локальных переменных. Сейчас объясню на примере.

let a = 10;

function one() {
    let a = 15;
    return a * 10;
}

console.log(a); // 10
console.log(one()); // 150

В консоли вывелась глобальная переменная с числом 10 (так и должно быть), но обратите внимание на число 150, в данном математическом расчете уже участвовала локальная переменная a, с числом 15. Переменные внутри функции живут в тот момент, когда используется в вычислениях или вызывается эта функция. Как только функция one() прекратила свое существование, локальная переменная a просто исчезла. При таких условиях, нарушается работа счётчика.

let a = 0;

function one() {
    a = a + 1;
    return a;
}

console.log(one()); // 1
console.log(one()); // 2
console.log(one()); // 3

Вроде все хорошо, счетчик работает корректно, но есть в этом коде одно слабое место - глобальная переменная a, к которой обращается функция. Проблема в том, что объявленная глобальная переменная, оторвана от функции. Например какой-нибудь программист переопределит глобальную переменную, не заметив её связи со счетчиком. Тогда нарушится работа счетчика, ведь все функции имеют доступ к глобальным переменным. Получается, что глобальная переменная беззащитна. Так вот, для защиты глобальных переменных и были придуманы замыкания.

Пример замыканий

Замыкания делают код безопаснее, защищают его от нежелательных переопределений глобальных переменных. Сделаем такую хитрость,поместим функцию one() внутри другой функции wrap(). Это даст следующее: Когда будет вызвана функция wrap(), JavaScript создаст переменную a внутри функции wrap() и эта переменная не прекратит свое существование. Таким образом мы получим несколько экземпляров области видимости, внутри которых существуют свои переменные a.

function wrap() {
    let a = 0;
    return function() {
        a = a + 1
        return a;
    }
}

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

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

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