A Closure は、別の関数 (外部関数) 内に囲まれた関数が返され、外部関数の外で呼び出される 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 の外部で呼び出され、メイン関数であっても、値 vat パラメーターを取得できます。関数taxCalculatorが実行されました。

react js、JavaScript UI ライブラリでは、イベント ハンドラーは 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}
        
      ))}
    
  );
}

OnClick イベントで handleAction を直接呼び出す方法に注目してください。 また、handleAction 関数をリファクタリングして、スイッチ ?

コンポーネントのマウント時に handleAction が呼び出され、最初のレンダリング中に (handleAction) が実行された場合でも、handleAction によって返された関数が handleAction の引数の値を取得して保持すると、クロージャが発生します。
これは Javascript でイベントを処理する優れた方法です。どう思いますか?