Рубрика “Учебник JavaScript” – как работают замыкания в JS

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

Простой пример, настолько простой, что даже написан по-русски:

function внешняяФункция(x) {

  function внутренняяФункция(y) {

    return x + y; 

    внутренняя функция имеет доступ к переменной x из внешней функции

  }

  return внутренняяФункция;

}


const результат = внешняяФункция(5); 

сохраняем возвращаемую внутреннюю функцию в переменной результат

console.log(результат(10)); 


выводит 15, так как доступна сохраненная переменная x со значением 5

В этом примере у нас есть внешняя функция внешняяФункция, которая возвращает внутреннюю функцию внутренняяФункция. Внутри внутренней функции есть ссылка на переменную x из внешней функции, и это позволяет использовать переменную x даже после того, как внешняя функция завершила свою работу.

Когда мы вызываем внешняяФункция(5), она возвращает внутреннюю функцию, которую мы сохраняем в переменной результат. Затем мы вызываем результат(10), и это возвращает сумму x и y, то есть 5 + 10.

Из этого примера можно видеть, что замыкания позволяют нам сохранять доступ к переменным из родительской функции и использовать их в дочерней функции. Это особенно полезно, когда нам нужно сохранить состояние между вызовами функции или создать приватные переменные.
Давай рассмотрим еще один пример использования замыканий в JavaScript. Представим, что у нас есть функция multiplyBy, которая принимает один аргумент и возвращает внутреннюю функцию, которая умножает переданный аргумент на значение, которое мы укажем при вызове multiplyBy. Вот как это может выглядеть:

function multiplyBy(factor) {

  return function(x) {

   return x * factor; 

   умножаем переданный аргумент на значение factor

  };

}


const multiplyByTwo = multiplyBy(2); 

создаем внутреннюю функцию, которая будет умножать на 2

const multiplyByThree = multiplyBy(3); 

создаем внутреннюю функцию, которая будет умножать на 3


console.log(multiplyByTwo(4));

выводит 8, так как умножает 4 на 2

console.log(multiplyByThree(4)); 

выводит 12, так как умножает 4 на 3

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

Когда мы вызвали multiplyBy(2), она вернула внутреннюю функцию, которая умножает аргумент на 2. Мы сохраняем эту внутреннюю функцию в переменной multiplyByTwo. Затем мы вызываем multiplyByTwo(4), и это возвращает результат умножения 4 на 2, то есть 8.

Аналогично, когда мы вызвали multiplyBy(3), она вернула внутреннюю функцию, которая умножает аргумент на 3. Мы сохраняем эту внутреннюю функцию в переменной multiplyByThree. Затем мы вызываем multiplyByThree(4), и это возвращает результат умножения 4 на 3, то есть 12.

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