Замыкание — это функция Javascript, при которой функция, заключенная внутри другой функции (внешней функции), возвращается и вызывается вне внешней функции.

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

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

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

Как видите, для каждого напитка всегда будет запоминаться ставка налога в зависимости от того, алкогольный это напиток или безалкогольный, т. е. возвращаемая функция вызывается за пределами TaxCalculator и может получить значение параметра НДС, даже если основной функция TaxCalculator была выполнена.

В React js, библиотеке пользовательского интерфейса JavaScript, обработчики событий объявляются встроенными в JSX как таковые.

Click me 

Если у обработчика событий есть аргумент, он будет вызван внутри функции как таковой.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (

  { actions.map(action => 
handleAction(action)}>{action})}
  
)
}

Обратите внимание, что handleAction инкапсулируется функцией стрелки при назначении его обработчику события onclick.

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

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    

      {actions.map((action) => (
        
          {action}
        
      ))}
    
  );
}

Обратите внимание, как мы вызываем handleAction непосредственно в событии OnClick? Также обратите внимание, что мы провели рефакторинг функции handleAction, чтобы она возвращала функцию, выполняющую необходимые действия с помощью переключателя ?

HandleAction вызывается при монтировании компонента. Закрытие происходит, когда функция, возвращаемая handleAction, захватывает и удерживает значение аргумента handleAction, даже если оно (handleAction) выполняется во время первого рендеринга.
Это изящный способ обработки событий в Javascript. Что вы думаете?