जावास्क्रिप्ट कॉलबैक फ़ंक्शंस का उपयोग कैसे करें

आपने शायद देखा होगा कि कुछ कोड स्निपेट किसी फ़ंक्शन के अंदर "कॉलबैक" शब्द का उपयोग करते हैं। कॉलबैक एक विशेष प्रकार का फ़ंक्शन है जो किसी अन्य फ़ंक्शन के अंदर पारित किया जाता है।

कॉलबैक अक्सर कोड के ब्लॉक को चलाने के लिए ईवेंट हैंडलर के अंदर उपयोग किया जाता है। इस गाइड में, हम इस बारे में बात करने जा रहे हैं कि कॉलबैक फ़ंक्शन क्या हैं और वे कैसे काम करते हैं। हम आपके कोड में उनका उपयोग करने का तरीका जानने में आपकी सहायता करने के लिए कॉलबैक फ़ंक्शन के एक उदाहरण के माध्यम से चलेंगे।

कॉलबैक फ़ंक्शन क्या है?

कॉलबैक फ़ंक्शन एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन में पैरामीटर के रूप में पारित किया जाता है।

कॉलबैक फ़ंक्शन उस फ़ंक्शन के भीतर चलाए जाते हैं जिसमें उन्हें घोषित किया जाता है। जब आप किसी फ़ंक्शन को निष्पादित करते हैं, तो उसका कॉलबैक फ़ंक्शन, यदि कोई निर्दिष्ट है, निष्पादित होगा। एक बार यह चलने के बाद, कॉलबैक फ़ंक्शन मुख्य फ़ंक्शन पर प्रतिक्रिया लौटाएगा।

कॉलबैक फ़ंक्शन काम करते हैं क्योंकि जावास्क्रिप्ट में, प्रत्येक फ़ंक्शन एक ऑब्जेक्ट है। इसका मतलब है कि हम उनके साथ किसी भी अन्य वस्तु की तरह काम कर सकते हैं। हम वेरिएबल्स को फ़ंक्शन असाइन कर सकते हैं, या उन्हें तर्क के रूप में पास कर सकते हैं, जैसे हम किसी अन्य मान के साथ करते हैं।

कॉलबैक कैसे काम करता है, यह दिखाने के लिए एक सरल उदाहरण का उपयोग करें। हम एक फ़ंक्शन बनाने जा रहे हैं जो एक वीडियो गेम के लिए उपयोगकर्ता के नाम को कंसोल पर प्रिंट करता है, उसके बाद उनका चरित्र प्रकार। आइए एक फ़ंक्शन घोषित करके शुरू करें:

function printName(name, callback) {
	console.log(`Player Name: ${name}`);
	callback();
}

यह एक अनाम जावास्क्रिप्ट फ़ंक्शन है जिसमें कॉलबैक होता है। बेनामी फ़ंक्शन बिना नाम के फ़ंक्शन हैं। वे आम तौर पर अन्य कार्यों के अंदर दिखाई देते हैं, जैसे ऊपर के उदाहरण में।

यह कॉलबैक हमारे कोड में दूसरा पैरामीटर है। जब यह फ़ंक्शन चलाया जाता है, तो हमारे प्लेयर का नाम कंसोल पर प्रिंट हो जाता है। फिर, हमारे कॉलबैक () फ़ंक्शन की सामग्री को निष्पादित किया जाता है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

अब, आइए इस फ़ंक्शन का उपयोग करें:

printName("Violet", function() {
	console.log("Character Type: Mage");
})

हमने अपने फ़ंक्शन को printName() . कहा है इस कोड में। हमने खिलाड़ी के नाम के रूप में "वायलेट" निर्दिष्ट किया है। हमने एक फ़ंक्शन निर्दिष्ट किया है जो कैरेक्टर प्रकार को कॉलबैक के रूप में प्रिंट करता है। आइए इस कोड को चलाएं और देखें कि क्या होता है:

खिलाड़ी का नाम:वायलेट

चरित्र प्रकार:दाना

printName() . की सामग्री फ़ंक्शन निष्पादित होते हैं, उसके बाद हमारे कॉलबैक फ़ंक्शन की सामग्री। जब आप उन्हें पैरामीटर के रूप में पास कर रहे हों तो कॉलबैक फ़ंक्शंस को घोषित करने की आवश्यकता नहीं होती है। हम अपने कोड को दोबारा कर सकते हैं ताकि हमारा कॉलबैक फ़ंक्शन स्वयं ही हो:

function printCharacterType() {
	console.log("Character Type: Mage");
}

printName("Violet", printCharacterType())

यह कोड वही प्रतिक्रिया देगा। हमने printCharacterType() . नाम से एक फंक्शन बनाया है जो किसी प्लेयर के कैरेक्टर टाइप को कंसोल पर प्रिंट करता है। यह फ़ंक्शन तब निष्पादित होता है जब हम printName() run चलाते हैं , जैसा कि इसे कॉलबैक के रूप में निर्दिष्ट किया गया है।

ईवेंट के साथ कॉलबैक का उपयोग करना

कॉलबैक आमतौर पर जावास्क्रिप्ट घटनाओं के साथ उपयोग किया जाता है।

घटनाएँ किसी क्रिया के लिए सुनती हैं, जैसे कोई उपयोगकर्ता एक बटन क्लिक करता है, और जब वह क्रिया की जाती है तो कोड का एक ब्लॉक चलाते हैं। आइए एक कॉलबैक बनाएं जो तब चलता है जब कोई उपयोगकर्ता किसी छवि पर होवर करता है। एक HTML फ़ाइल खोलें और एक टैग के अंदर निम्न कोड पेस्ट करें:

<img src=“ https://careerkarma.com/favicon.ico ” id=“image” />


यह वेब पेज पर एक छवि को परिभाषित करता है जिसे उपयोगकर्ता क्लिक कर सकता है। फिर, निम्नलिखित जावास्क्रिप्ट कोड को <script> . के अंदर संलग्न करें उपनाम:

var image = document.querySelector("#image")

image.addEventListener("mouseover", function() {
	console.log("The user has moused over the image.");
});

यह कोड "छवि" आईडी वाले तत्व का चयन करता है। यह तब यह सुनने के लिए addEventListener विधि का उपयोग करता है जब उपयोगकर्ता छवि को "माउस ओवर" (ओवर होवर) करता है। जब उपयोगकर्ता अपने कर्सर के साथ छवि पर होवर करता है, तो कंसोल पर एक संदेश मुद्रित किया जाएगा:

उपयोगकर्ता ने छवि पर माउस ले लिया है।

वेब अनुरोधों के साथ कॉलबैक का उपयोग करना

वेब अनुरोधों को आमतौर पर एक तुल्यकालिक तरीके से निष्पादित करने की आवश्यकता होती है। ऐसा इसलिए है क्योंकि अधिकांश वेब अनुप्रयोगों को शेष पृष्ठ लोड होने से पहले विशेष डेटा पुनर्प्राप्त करने की आवश्यकता होती है।

आइए एक प्रोग्राम बनाते हैं जो JSON प्लेसहोल्डर एपीआई के लिए अनुरोध करता है, एक एपीआई जिसमें डमी डेटा है जिसे हम परीक्षण उद्देश्यों के लिए उपयोग कर सकते हैं। हमारे कार्यक्रम को कंसोल पर प्रतिक्रिया प्रिंट करनी चाहिए। हम एक फ़ंक्शन घोषित करके शुरू करेंगे जो अनुरोध करता है:

function makeRequest(url, callback) {
	var query = await fetch(url).then(res => res.json());
	callback(query);
}

यह फ़ंक्शन फ़ेच () एपीआई का उपयोग करके एक वेब अनुरोध करेगा। प्रतिक्रिया चर "क्वेरी" को सौंपी गई है। हम अपने कॉलबैक फ़ंक्शन में एक तर्क के रूप में "क्वेरी" पास करके इस वेब अनुरोध के परिणाम को हमारे कॉलबैक में वापस कर देते हैं। अब, हमारे फ़ंक्शन को कॉल करें और कंसोल पर इसकी प्रतिक्रिया का प्रिंट आउट लें:

makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
	console.log(data);
});

यह कोड JSON प्लेसहोल्डर API से अनुरोध करने के लिए makeRequest विधि को निर्देश देता है। हमारा कॉलबैक फ़ंक्शन इस अनुरोध से कंसोल पर लौटाए गए डेटा को प्रिंट करता है:

{
  "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."
}

महान! हमारे कोड ने एक वेब अनुरोध किया है और कंसोल पर अपनी प्रतिक्रिया मुद्रित की है।

निष्कर्ष (और चुनौती)

कॉलबैक आपको किसी फ़ंक्शन को किसी अन्य फ़ंक्शन के अंदर पैरामीटर के रूप में पास करने की अनुमति देता है। जब कोई ईवेंट निष्पादित होता है या वेब अनुरोध करने के लिए कोड चलाने के लिए इन्हें आमतौर पर ईवेंट हैंडलर के भीतर उपयोग किया जाता है।

क्या आप एक चुनौती की तलाश में हैं? एक कॉलबैक फ़ंक्शन लिखें जो वेब पेज पर एक बटन दबाए जाने पर निष्पादित होता है। यदि आप पहले से ही ऐसा कर चुके हैं, तो एक फ़ंक्शन लिखने का प्रयास करें जो आइटमों की सूची को सॉर्ट करता है और प्रत्येक को कंसोल पर प्रिंट करने के लिए कॉलबैक फ़ंक्शन का उपयोग करता है।

अब आप एक समर्थक की तरह अतुल्यकालिक प्रोग्रामिंग के लिए जावास्क्रिप्ट कॉलबैक का उपयोग शुरू करने के लिए तैयार हैं!