Un Cierre es una característica de Javascript donde una función, encerrada dentro de otra función (función externa), se devuelve y se invoca fuera de la función externa.

Se forma un cierre cuando la función interna mantiene el acceso a una variable fuera de su alcance, también conocido como alcance léxico; acceso a variables y argumentos de la función externa incluso después de que la externa se haya ejecutado.

Creemos una función de cierre de calculadora de impuestos para calcular los impuestos de las bebidas alcohólicas y no alcohólicas en función de sus tasas impositivas.

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 puede ver, cada bebida siempre recordará su tasa impositiva en función de si es una bebida alcohólica o no alcohólica, es decir, la función devuelta se invoca fuera de taxCalculator y puede recuperar el parámetro de valor de IVA aunque el parámetro principal Se había ejecutado la función TaxCalculator.

En reaccionar js, biblioteca de interfaz de usuario de JavaScript, los controladores de eventos se declaran en línea en JSX como tales.

Click me 

Si el controlador de eventos tiene un argumento, entonces será invocado dentro de una función 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})}
  
)
}

Tenga en cuenta que handleAction está encapsulado por una función de flecha cuando se asigna al controlador de eventos onclick.

Con el cierre, podemos simplemente llamar a handleAction con un argumento de acción y luego devolver una función interna que toma el argumento de acción y realiza el resto de las acciones de esta manera.

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

¿Observa cómo invocamos handleAction directamente en el evento OnClick? Observe también que hemos refactorizado la función handleAction para que devuelva una función que realice las acciones necesarias con un interruptor.

Es una manera clara de manejar eventos en Javascript. ¿Qué opinas?