A Closer एक जावास्क्रिप्ट सुविधा है जहां एक फ़ंक्शन, किसी अन्य फ़ंक्शन (बाहरी फ़ंक्शन) के अंदर संलग्न होता है, वापस लौटाया जाता है और बाहरी फ़ंक्शन के बाहर लागू किया जाता है।

एक क्लोजर तब बनता है जब आंतरिक फ़ंक्शन अपने दायरे उर्फ ​​लेक्सिकल स्कोप के बाहर वेरिएबल तक पहुंच बनाए रखता है; बाहरी फ़ंक्शन के निष्पादित होने के बाद भी बाहरी फ़ंक्शन के चर और तर्कों तक पहुंच।

आइए उनकी कर दरों के आधार पर मादक और गैर-अल्कोहल पेय के लिए करों की गणना करने के लिए एक कर कैलकुलेटर क्लोजर फ़ंक्शन बनाएं।

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)

जैसा कि आप देख सकते हैं, प्रत्येक पेय हमेशा अपनी कर दर को याद रखेगा, चाहे वह मादक पेय हो या गैर-अल्कोहलिक, यानी लौटाया गया फ़ंक्शन टैक्सकैलकुलेटर के बाहर लागू किया जाता है और मुख्य होने के बावजूद मूल्य वैट पैरामीटर को पुनः प्राप्त करने में सक्षम होता है फ़ंक्शन टैक्सकैलकुलेटर निष्पादित किया गया था।

रिएक्ट जेएस, जावास्क्रिप्ट यूआई लाइब्रेरी में, इवेंट हैंडलर को जेएसएक्स पर इनलाइन घोषित किया जाता है।

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

ध्यान दें कि हैंडलएक्शन को ऑनक्लिक इवेंट हैंडलर को असाइन करते समय एक एरो फ़ंक्शन द्वारा इनकैप्सुलेट किया जाता है।

क्लोजर के साथ हम केवल एक्शन तर्क के साथ हैंडलएक्शन को कॉल कर सकते हैं, फिर एक आंतरिक फ़ंक्शन लौटा सकते हैं जो एक्शन तर्क को पकड़ लेता है और बाकी क्रियाओं को उसी तरह निष्पादित करता है।

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

ध्यान दें कि हम ऑनक्लिक ईवेंट पर सीधे हैंडलएक्शन कैसे लागू करते हैं? यह भी ध्यान दें कि हमने हैंडलएक्शन फ़ंक्शन को दोबारा तैयार किया है ताकि यह एक स्विच के साथ आवश्यक क्रियाएं करते हुए एक फ़ंक्शन लौटाए?

जब घटक माउंट होता है तो हैंडलएक्शन लागू होता है, एक क्लोजर तब होता है जब हैंडलएक्शन द्वारा लौटाया गया फ़ंक्शन हैंडलएक्शन पर तर्क के मूल्य को पकड़ लेता है और बनाए रखता है, भले ही यह (हैंडलएक्शन) पहले रेंडर के दौरान निष्पादित हो।
यह जावास्क्रिप्ट में घटनाओं को संभालने का एक अच्छा तरीका है। आप क्या सोचते हैं?