आपने शायद कुछ कोड स्निप्पेट्स में एक फंक्शन के अंदर "callback" शब्द देखा होगा। कॉलबैक एक विशेष प्रकार के फंक्शन होते हैं जिन्हें दूसरे फंक्शन के अंदर पास किया जाता है।
कॉलबैक का उपयोग अक्सर इवेंट हैंडलर्स के अंदर कोड के एक ब्लॉक को चलाने के लिए किया जाता है। इस गाइड में, हम बात करेंगे कि कॉलबैक फंक्शन्स क्या हैं और वे कैसे काम करते हैं। हम कॉलबैक फंक्शन का एक उदाहरण देखेंगे ताकि आप सीख सकें कि उन्हें अपने कोड में कैसे उपयोग किया जाए।
कॉलबैक फंक्शन क्या है?
एक कॉलबैक फंक्शन वह फंक्शन होता है जिसे पैरामीटर के रूप में दूसरे फंक्शन में पास किया जाता है।
कॉलबैक फंक्शन्स उस फंक्शन के भीतर चलते हैं जिसमें वे घोषित होते हैं। जब आप एक फंक्शन को एक्जीक्यूट करते हैं, तो उसका कॉलबैक फंक्शन, यदि निर्दिष्ट है, तो एक्जीक्यूट होगा। एक बार चलने के बाद, कॉलबैक फंक्शन मुख्य फंक्शन को एक प्रतिक्रिया लौटाएगा।
कॉलबैक फंक्शन्स JavaScript में इसलिए काम करते हैं क्योंकि हर फंक्शन एक ऑब्जेक्ट होता है। इसका मतलब है कि हम उनके साथ किसी अन्य ऑब्जेक्ट की तरह काम कर सकते हैं। हम फंक्शन्स को वेरिएबल्स को असाइन कर सकते हैं, या उन्हें आर्ग्युमेंट्स के रूप में पास कर सकते हैं, ठीक वैसे ही जैसे हम किसी अन्य मान के साथ करते हैं।
आइए एक सरल उदाहरण का उपयोग करके दिखाते हैं कि कॉलबैक कैसे काम करते हैं। हम एक फंक्शन बनाने जा रहे हैं जो एक वीडियो गेम के लिए यूजर का नाम कंसोल पर प्रिंट करता है, उसके बाद उनका कैरेक्टर टाइप। आइए एक फंक्शन घोषित करके शुरू करें:
function printName(name, callback) { console.log(`Player Name: ${name}`); callback(); }
यह एक अनाम JavaScript फंक्शन है जिसमें एक कॉलबैक होता है। अनाम फंक्शन्स वे फंक्शन्स होते हैं जिनका कोई नाम नहीं होता। वे आमतौर पर अन्य फंक्शन्स के अंदर दिखाई देते हैं, जैसे ऊपर के उदाहरण में।
यह कॉलबैक हमारे कोड में दूसरा पैरामीटर है। जब यह फंक्शन चलता है, तो हमारे प्लेयर का नाम कंसोल पर प्रिंट होता है। फिर, हमारे callback() फंक्शन की सामग्री एक्जीक्यूट होती है।
अब, आइए इस फंक्शन का उपयोग करें:
printName("Violet", function() { console.log("Character Type: Mage"); })
हमने अपने फंक्शन printName() को इस कोड में कॉल किया है। हमने "Violet" को प्लेयर के नाम के रूप में निर्दिष्ट किया है। हमने कॉलबैक के रूप में कैरेक्टर टाइप प्रिंट करने वाले फंक्शन को निर्दिष्ट किया है। आइए इस कोड को चलाएं और देखें क्या होता है:
Player Name: Violet
Character Type: Mage
printName() फंक्शन की सामग्री एक्जीक्यूट होती है, उसके बाद हमारे कॉलबैक फंक्शन की सामग्री। कॉलबैक फंक्शन्स को पैरामीटर के रूप में पास करते समय घोषित करने की आवश्यकता नहीं होती। हम अपने कोड को रीफैक्टर कर सकते हैं ताकि हमारा कॉलबैक फंक्शन अपने आप में हो:
function printCharacterType() { console.log("Character Type: Mage"); } printName("Violet", printCharacterType())
यह कोड वही प्रतिक्रिया लौटाएगा। हमने printCharacterType() नामक एक फंक्शन बनाया है जो प्लेयर के कैरेक्टर टाइप को कंसोल पर प्रिंट करता है। यह फंक्शन तब एक्जीक्यूट होता है जब हम printName() चलाते हैं, क्योंकि इसे कॉलबैक के रूप में निर्दिष्ट किया गया है।
इवेंट्स के साथ कॉलबैक का उपयोग
कॉलबैक का उपयोग आमतौर पर JavaScript इवेंट्स के साथ किया जाता है।
इवेंट किसी एक्शन को सुनते हैं, जैसे यूजर द्वारा बटन क्लिक करना, और जब वह एक्शन लिया जाता है तो कोड का एक ब्लॉक चलाते हैं। आइए एक कॉलबैक बनाएं जो तब चले जब यूजर किसी इमेज पर होवर करे। एक HTML फाइल खोलें और निम्न कोड को <body> टैग के अंदर पेस्ट करें:
<img src="https://careerkarma.com/favicon.ico" id="image" />
यह वेब पेज पर एक इमेज को परिभाषित करता है जिस पर यूजर क्लिक कर सकता है। फिर, निम्न JavaScript कोड को <script> टैग के भीतर संलग्न करें:
var image = document.querySelector("#image") image.addEventListener("mouseover", function() { console.log("The user has moused over the image."); });
यह कोड "image" ID वाले एलिमेंट को चुनता है। फिर यह addEventListener मेथड का उपयोग यह सुनने के लिए करता है कि यूजर कब इमेज पर "माउस ओवर" (होवर) करता है। जब यूजर अपने कर्सर से इमेज पर होवर करता है, तो एक संदेश कंसोल पर प्रिंट होगा:
The user has moused over the image.
वेब रिक्वेस्ट्स के साथ कॉलबैक का उपयोग
वेब रिक्वेस्ट्स को आमतौर पर सिंक्रोनस तरीके से एक्जीक्यूट करने की आवश्यकता होती है। ऐसा इसलिए है क्योंकि अधिकांश वेब एप्लिकेशन्स को शेष पेज लोड होने से पहले विशेष डेटा प्राप्त करने की आवश्यकता होती है।
आइए एक प्रोग्राम बनाएं जो JSON Placeholder API पर रिक्वेस्ट करता है, एक API जिसमें टेस्टिंग के लिए डमी डेटा होता है। हमारा प्रोग्राम कंसोल पर प्रतिक्रिया प्रिंट करना चाहिए। हम रिक्वेस्ट करने वाले फंक्शन को घोषित करके शुरू करेंगे:
function makeRequest(url, callback) { var query = await fetch(url).then(res => res.json()); callback(query); }
यह फंक्शन fetch() API का उपयोग करके वेब रिक्वेस्ट करेगा। प्रतिक्रिया "query" वेरिएबल को असाइन की जाती है। हम इस वेब रिक्वेस्ट के परिणाम को अपने कॉलबैक को "query" को अपने कॉलबैक फंक्शन में आर्ग्युमेंट के रूप में पास करके लौटाते हैं। अब, आइए अपने फंक्शन को कॉल करें और उसकी प्रतिक्रिया को कंसोल पर प्रिंट करें:
makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) { console.log(data); });
यह कोड makeRequest मेथड को JSON Placeholder API पर रिक्वेस्ट करने का निर्देश देता है। हमारा कॉलबैक फंक्शन इस रिक्वेस्ट से लौटाए गए डेटा को कंसोल पर प्रिंट करता है:
{ "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto." }
बहुत बढ़िया! हमारे कोड ने एक वेब रिक्वेस्ट की और उसकी प्रतिक्रिया को कंसोल पर प्रिंट किया।
निष्कर्ष (और चुनौती)
कॉलबैक आपको एक फंक्शन को दूसरे फंक्शन के अंदर पैरामीटर के रूप में पास करने की अनुमति देते हैं। वे आमतौर पर इवेंट हैंडलर्स के भीतर उपयोग किए जाते हैं जब कोई इवेंट एक्जीक्यूट होता है या वेब रिक्वेस्ट करने के लिए कोड चलाने के लिए।
क्या आप एक चुनौती ढूंढ रहे हैं? एक कॉलबैक फंक्शन लिखें जो वेब पेज पर बटन दबाए जाने पर एक्जीक्यूट हो। यदि आपने यह पहले ही कर लिया है, तो एक फंक्शन लिखने का प्रयास करें जो आइटम्स की सूची को सॉर्ट करता है और प्रत्येक को कंसोल पर प्रिंट करने के लिए कॉलबैक फंक्शन का उपयोग करता है।
अब आप एक प्रो की तरह असिंक्रोनस प्रोग्रामिंग के लिए JavaScript कॉलबैक का उपयोग शुरू करने के लिए तैयार हैं!
