Um Closure é um recurso Javascript onde uma função, incluída dentro de outra função (função externa), é retornada e invocada fora da função externa.

Um fechamento é formado quando a função interna mantém acesso à variável fora de seu escopo, também conhecido como escopo lexical; acesso a variáveis ​​​​e argumentos da função externa mesmo após a execução da função externa.

Vamos criar uma função de fechamento de calculadora de impostos para calcular impostos para bebidas alcoólicas e não alcoólicas com base em suas alíquotas.

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)

Como você pode ver, cada bebida sempre se lembrará de sua alíquota de imposto com base no fato de ser uma bebida alcoólica ou não alcoólica, ou seja, a função retornada é invocada fora de taxCalculator e é capaz de recuperar o parâmetro value vat mesmo que o principal a função taxCalculator foi executada.

No react js, biblioteca JavaScript UI, os manipuladores de eventos são declarados embutidos no JSX como tal.

Click me 

Se o manipulador de eventos tiver um argumento, ele será invocado dentro de uma função como tal.

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})}
  
)
}

Observe que handleAction é encapsulado por uma função de seta ao atribuí-lo ao manipulador de eventos onclick.

Com o encerramento, podemos simplesmente chamar handleAction com um argumento de ação e retornar uma função interna que captura o argumento de ação e executa o restante das ações assim.

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}
        
      ))}
    
  );
}

Observou como invocamos handleAction diretamente no evento OnClick? observe também que refatoramos a função handleAction para que ela retorne uma função executando as ações necessárias com uma opção ?

O handleAction é invocado quando o componente é montado, um fechamento ocorre quando a função retornada por handleAction agarra e mantém o valor do argumento em handleAction mesmo que (handleAction) tenha sido executado durante a primeira renderização.
É uma maneira legal de lidar com eventos em Javascript.o que você acha?