आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

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

जावास्क्रिप्ट में फ़ंक्शंस बनाने के कई तरीके हैं। यहां आप कार्यों को बनाने और उनका उपयोग करने के विभिन्न तरीकों के बारे में जानेंगे।

फंक्शन डिक्लेरेशन: द स्ट्रेटफॉरवर्ड वे

जावास्क्रिप्ट में फ़ंक्शन बनाने का एक तरीका फ़ंक्शन घोषणाओं के माध्यम से है। एक फ़ंक्शन डिक्लेरेशन जावास्क्रिप्ट में एक फ़ंक्शन है जो नीचे दिए गए सिंटैक्स का अनुसरण करता है।

समारोहfunctionName(पैरामीटर) {
// कोड यहां जाता है ...
वापस करना"यह एक समारोह घोषणा है";
}

उपरोक्त कोड ब्लॉक के घटकों में शामिल हैं:

  • समारोह कीवर्ड: यह कीवर्ड एक फ़ंक्शन घोषित करता है।
  • functionName: यह फ़ंक्शन का नाम है। व्यवहार में, यह यथासंभव वर्णनात्मक और अर्थपूर्ण होना चाहिए, यह दर्शाता है कि फ़ंक्शन क्या करता है।
  • instagram viewer
  • पैरामीटर: यह फ़ंक्शन पैरामीटर का प्रतिनिधित्व करता है। पैरामीटर वेरिएबल्स की एक वैकल्पिक सूची है जिसे आप किसी फ़ंक्शन को कॉल करते समय पास कर सकते हैं।
  • फ़ंक्शन बॉडी: इसमें वह कोड होता है जिसे कॉल करने पर फ़ंक्शन चलेगा। यह घुंघराले ब्रेसिज़ से घिरा हुआ है {} और कोई भी वैध जावास्क्रिप्ट कोड हो सकता है।
  • वापस करना कथन: यह कथन किसी फ़ंक्शन के निष्पादन को रोकता है और निर्दिष्ट मान देता है। उपरोक्त मामले में, फ़ंक्शन को कॉल करने से "यह एक फ़ंक्शन घोषणा है" स्ट्रिंग वापस आ जाएगी।

उदाहरण के लिए, नीचे दिया गया फ़ंक्शन डिक्लेरेशन पैरामीटर के रूप में तीन नंबर लेता है और उनका योग लौटाता है।

समारोहAddThreeNumber(ए, बी, सी) {
वापस करना ए + बी + सी;
}

जावास्क्रिप्ट में फ़ंक्शन डिक्लेरेशन को कॉल करने के लिए, फ़ंक्शन का नाम कोष्ठकों के सेट के बाद लिखें (). यदि फ़ंक्शन कोई पैरामीटर लेता है, तो उन्हें कोष्ठक के भीतर तर्क के रूप में पास करें।

उदाहरण के लिए:

ऐड थ्रीनंबर्स(1, 2, 3) // 6

उपरोक्त कोड ब्लॉक कॉल करता है AddThreeNumber कार्य करता है और 1, 2, और 3 को फ़ंक्शन के तर्क के रूप में पास करता है। यदि आप इस कोड को चलाते हैं, तो यह मान 6 लौटाएगा।

जावास्क्रिप्ट लहराता है फ़ंक्शन घोषणाएं, जिसका अर्थ है कि आप उन्हें परिभाषित करने से पहले उन्हें कॉल कर सकते हैं।

उदाहरण के लिए:

फहराया गया है (); // समारोह फहराया जाता है

समारोहफहराया गया है() {
सांत्वना देना।लकड़ी का लट्ठा("फ़ंक्शन फहराया गया है");
वापस करनासत्य;
}

जैसा कि ऊपर दिए गए कोड ब्लॉक में दिखाया गया है, कॉलिंग फहराया गया है इसे परिभाषित करने से पहले कोई त्रुटि नहीं होगी।

फ़ंक्शन एक्सप्रेशन: मानों के रूप में कार्य करता है

जावास्क्रिप्ट में, आप एक फ़ंक्शन को एक अभिव्यक्ति के रूप में परिभाषित कर सकते हैं। फिर आप फ़ंक्शन मान को एक चर के लिए असाइन कर सकते हैं या इसे किसी अन्य फ़ंक्शन के तर्क के रूप में उपयोग कर सकते हैं।

उन्हें गुमनाम कार्यों के रूप में भी जाना जाता है क्योंकि उनके पास कोई नाम नहीं है, और आप उन्हें केवल उस वेरिएबल से कॉल कर सकते हैं जिसे आपने उन्हें सौंपा है।

नीचे फ़ंक्शन अभिव्यक्ति के लिए सिंटैक्स है:

कॉन्स्ट फ़ंक्शननाम = समारोह () {
वापस करना"फंक्शन एक्सप्रेशन";
};

जावास्क्रिप्ट में एक फ़ंक्शन एक्सप्रेशन को कॉल करने के लिए, आपके द्वारा फ़ंक्शन को निर्दिष्ट चर नाम लिखें और उसके बाद कोष्ठकों का एक सेट (). यदि फ़ंक्शन कोई पैरामीटर लेता है, तो उन्हें कोष्ठक के भीतर तर्क के रूप में पास करें।

उदाहरण के लिए:

फ़ंक्शननाम (); // फंक्शन एक्सप्रेशन

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

उदाहरण के लिए:

बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", समारोह (आयोजन) {
सांत्वना देना।लकड़ी का लट्ठा("आपने एक बटन क्लिक किया!");
});

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

उपरोक्त मामले में, जब ईवेंट श्रोता को a क्लिक ईवेंट, यह कॉलबैक फ़ंक्शन को कॉल करता है और पास करता है आयोजन एक तर्क के रूप में वस्तु।

फ़ंक्शन घोषणाओं के विपरीत, फ़ंक्शन एक्सप्रेशन को फहराया नहीं जाता है, इसलिए आप उन्हें परिभाषित करने से पहले उन्हें कॉल नहीं कर सकते। किसी फ़ंक्शन एक्सप्रेशन को परिभाषित करने से पहले उसे एक्सेस करने का प्रयास करने का परिणाम होगा a संदर्भ त्रुटि.

उदाहरण के लिए:

फहराया गया है (); // संदर्भ त्रुटि: आरंभीकरण से पहले 'isHoisted' तक नहीं पहुंच सकता

कॉन्स्ट फहराया = समारोह () {
सांत्वना देना।लकड़ी का लट्ठा("फ़ंक्शन फहराया गया है");
};

एरो फ़ंक्शंस: कॉम्पैक्ट और लिमिटेड

ES6 ने जावास्क्रिप्ट में अनाम कार्यों को लिखने के लिए एक आशुलिपि पेश की जिसे तीर कार्य कहा जाता है। उनके पास एक संक्षिप्त सिंटैक्स है जो आपके कोड को अधिक पठनीय बना सकता है, विशेष रूप से छोटे, एकल-पंक्ति कार्यों के साथ काम करते समय।

फ़ंक्शंस बनाने के अन्य तरीकों के विपरीत, एरो फ़ंक्शंस की आवश्यकता नहीं होती है समारोह कीवर्ड। एक एरो फंक्शन एक्सप्रेशन में तीन भाग होते हैं:

  • कोष्ठक की एक जोड़ी (()) पैरामीटर युक्त। यदि फ़ंक्शन में केवल एक पैरामीटर है, तो आप कोष्ठक छोड़ सकते हैं।
  • एक तीर (=>), जिसमें एक समान चिह्न होता है (=) और इससे बड़ा चिह्न (>).
  • घुंघराले ब्रेसिज़ की एक जोड़ी जिसमें फंक्शन बॉडी होती है। यदि फ़ंक्शन में एकल अभिव्यक्ति है, तो आप घुंघराले ब्रेसिज़ को छोड़ सकते हैं।

उदाहरण के लिए:

// सिंगल पैरामीटर, इंप्लिसिट रिटर्न
कॉन्स्ट फ़ंक्शननाम = पैरामीटर =>सांत्वना देना।लकड़ी का लट्ठा("सिंगल पैरामीटर एरो फंक्शन")

// एकाधिक पैरामीटर, स्पष्ट वापसी
कॉन्स्ट फ़ंक्शननाम = (पैरामीटर_1, पैरामीटर_2) => {
वापस करना"एकाधिक पैरामीटर तीर फ़ंक्शन"
};

जब आप कर्ली ब्रेसिज़ को छोड़ देते हैं, तो ऐरो फ़ंक्शन निहित रूप से एकल एक्सप्रेशन लौटाता है, इसलिए इसकी कोई आवश्यकता नहीं है वापस करना कीवर्ड। दूसरी ओर, यदि आप घुंघराले ब्रेसिज़ को नहीं छोड़ते हैं, तो आपको स्पष्ट रूप से एक मान का उपयोग करके वापस करना होगा वापस करना कीवर्ड।

तीर के कार्यों का भी एक अलग होता है यह नियमित कार्यों की तुलना में बाध्यकारी। नियमित कार्यों में, का मूल्य यह इस पर निर्भर करता है कि आप फ़ंक्शन को कैसे कॉल करते हैं। एक तीर समारोह में, यह के लिए हमेशा बाध्य होता है यह आसपास के दायरे का मूल्य।

उदाहरण के लिए:

कॉन्स्ट फू = {
नाम: "डेव",
अभिवादन करना: समारोह () {
सेटटाइमआउट(() => {
सांत्वना देना।लकड़ी का लट्ठा('हैलो, मेरा नाम है ${यह।नाम}`);
}, 1000);
},
};

फू.ग्रीट (); // लॉग "हैलो, मेरा नाम डेव है" 1 सेकंड के बाद

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

जैसा कि नाम से पता चलता है, तत्काल लागू किया गया फ़ंक्शन (IIFE) एक ऐसा फ़ंक्शन है जो इसके परिभाषित होते ही चलता है।

आईआईएफई की संरचना यहां दी गई है:

(समारोह () {
// कोड यहाँ
})();

(() => {
// कोड यहाँ
})();

(समारोह (परम_1, परम_2) {
सांत्वना देनालॉग (परम_1 * परम_2);
})(2, 3);

एक आईआईएफई में कोष्ठकों की एक जोड़ी के अंदर लिपटी एक फ़ंक्शन अभिव्यक्ति होती है। फ़ंक्शन का आह्वान करने के लिए बाड़े के बाहर कोष्ठक की एक जोड़ी के साथ इसका पालन करें।

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

कई अलग-अलग तरीकों से एक फंक्शन बनाना

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

आप जावास्क्रिप्ट और संरचना में कार्यों के निर्माण और अपने कोड को व्यवस्थित करने के लिए ऊपर चर्चा की गई तकनीकों का उपयोग कर सकते हैं। उस दृष्टिकोण का चयन करें जो आपकी मांगों के अनुकूल हो, क्योंकि प्रत्येक के विभिन्न लाभ और अनुप्रयोग हैं।