A 클로저는 다른 함수(외부 함수) 내에 포함된 함수가 반환되고 외부 함수 외부에서 호출되는 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 함수가 실행되었습니다.

JavaScript UI 라이브러리인 React js에서 이벤트 핸들러는 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 이벤트 핸들러에 할당할 때 화살표 함수로 캡슐화됩니다.

클로저를 사용하면 작업 인수를 사용하여 간단히 handlerAction을 호출한 다음 작업 인수를 잡고 나머지 작업을 수행하는 내부 함수를 반환할 수 있습니다.

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

OnClick 이벤트에서 직접 handlerAction을 호출하는 방법에 주목하시나요? 또한 스위치를 사용하여 필요한 작업을 수행하는 함수를 반환하도록 handlerAction 함수를 리팩터링했습니다. ?

handleAction은 구성요소가 마운트될 때 호출되고, handlerAction에서 반환된 함수가 첫 번째 렌더링 중에 실행된 핸들Action(handleAction)의 인수 값을 잡고 유지할 때 클로저가 발생합니다.
이는 Javascript에서 이벤트를 처리하는 깔끔한 방법입니다. 어떻게 생각하시나요?