जावास्क्रिप्ट तीर कार्य करता है: उन्हें क्यों आवश्यक है, उन्हें कैसे संभालना है, उनका उपयोग कब करना है, और कब नहीं

आधुनिक जावास्क्रिप्ट के सबसे उल्लेखनीय नवाचारों में से एक तीर कार्यों की उपस्थिति है, जिन्हें कभी-कभी "वसा" तीर फ़ंक्शन कहा जाता है। ऐसे कार्यों की घोषणा करते समय, वे वर्णों के एक विशेष संयोजन का उपयोग करते हैं - => ।

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


कभी-कभी ये और अन्य फायदे इस तथ्य को जन्म देते हैं कि तीर सिंटैक्स को फ़ंक्शन घोषित करने के अन्य तरीकों पर बिना शर्त वरीयता दी जाती है। उदाहरण के लिए, एयरबीएनबी के लोकप्रिय एस्लिंट कॉन्फ़िगरेशन को बल मिलता है कि जब भी कोई अनाम फ़ंक्शन बनाया जाता है, तो ऐसा फ़ंक्शन तीर की तरह होगा।

हालांकि, प्रोग्रामिंग में उपयोग किए जाने वाले अन्य अवधारणाओं और तंत्रों की तरह, तीर कार्यों में उनके पेशेवरों और विपक्ष हैं। उनके उपयोग से नकारात्मक दुष्प्रभाव हो सकते हैं। तीर के कार्यों का सही ढंग से उपयोग करने के लिए, आपको उनसे जुड़ी संभावित समस्याओं के बारे में जानना होगा।

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, इस पर ध्यान केंद्रित करेगा कि तीर कैसे काम करता है। यहां हम उन स्थितियों पर विचार करेंगे जिनमें उनके उपयोग से कोड में सुधार हो सकता है, और ऐसी स्थितियों में जिनका उपयोग नहीं किया जाना चाहिए।

जावास्क्रिप्ट में एरो फ़ंक्शंस की सुविधा

जावास्क्रिप्ट में एरो फ़ंक्शंस कुछ ऐसे हैं जैसे पाइथन में लैम्बडा फ़ंक्शंस और रूबी में ब्लॉक ।

ये एक विशेष वाक्यविन्यास के साथ अनाम कार्य हैं जो निश्चित संख्या में तर्क लेते हैं और उस कार्यक्षेत्र के संदर्भ में कार्य करते हैं जो उन्हें शामिल करता है, अर्थात् फ़ंक्शन या अन्य कोड के संदर्भ में जिसमें वे घोषित किए जाते हैं।

आइए इस बारे में अधिक विस्तार से बात करते हैं।

▍ सिंटेक्स एरो फ़ंक्शंस

एरो फ़ंक्शंस एकल योजना के अनुसार बनाए जाते हैं, जबकि फ़ंक्शंस की संरचना विशेष मामलों में, सरलीकृत हो सकती है। तीर फ़ंक्शन की मूल संरचना इस तरह दिखती है:

 (argument1, argument2, ... argumentN) => { //   } 

फ़ंक्शन तर्कों की सूची कोष्ठकों में है, इसके बाद = और > वर्णों से बना एक तीर है, और फिर फ़ंक्शन का शरीर ब्रेसिज़ में आता है।

यह बहुत ही सामान्य कार्यों के समान है, मुख्य अंतर यह है कि function कीवर्ड को यहां छोड़ दिया जाता है और तर्क सूची के बाद एक तीर जोड़ा जाता है।

कुछ मामलों में, हालांकि, बहुत अधिक कॉम्पैक्ट निर्माणों का उपयोग करके सरल तीर फ़ंक्शन घोषित किए जा सकते हैं।

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

 const add = (a, b) => a + b; 

यहाँ फ़ंक्शन के संक्षिप्त संकेतन का एक और संस्करण है, जिसका उपयोग तब किया जाता है जब फ़ंक्शन का केवल एक तर्क होता है।

 const getFirst = array => array[0]; 

जैसा कि आप देख सकते हैं, तर्क सूची के आसपास के कोष्ठक यहां छोड़े गए हैं। इसके अलावा, फ़ंक्शन का शरीर, जो इस उदाहरण में एकल कमांड द्वारा दर्शाया गया है, को भी कोष्ठक के बिना लिखा गया है। बाद में हम इस तरह के डिजाइनों के लाभों के बारे में अधिक बात करेंगे।

▍रिटर्न ऑब्जेक्ट्स और शॉर्ट रिकॉर्ड एरो फ़ंक्शंस

तीर के कार्यों के साथ काम करते समय, कुछ और जटिल वाक्य रचना का भी उपयोग किया जाता है, जिनके बारे में पता होना उपयोगी है।

उदाहरण के लिए, ऑब्जेक्ट शाब्दिक फ़ंक्शन से लौटने के लिए एकल-लाइन अभिव्यक्ति का उपयोग करने का प्रयास करें। यह प्रतीत हो सकता है, यह देखते हुए कि हम पहले से ही तीर के कार्यों के बारे में क्या जानते हैं, कि एक फ़ंक्शन घोषणा इस तरह दिखाई देगी:

 (name, description) => {name: name, description: description}; 

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

सिस्टम को इंगित करने के लिए कि हमें ऑब्जेक्ट शाब्दिक अर्थ है, हमें इसे कोष्ठक में संलग्न करना होगा:

 (name, description) => ({name: name, description: description}); 

Row एरो फ़ंक्शंस और उनके निष्पादन का संदर्भ

अन्य कार्यों के विपरीत, तीर फ़ंक्शन का अपना निष्पादन संदर्भ नहीं होता है ।

व्यवहार में, इसका मतलब है कि वे संस्थाओं को this विरासत में देते हैं और मूल फ़ंक्शन से arguments ।

उदाहरण के लिए, निम्नलिखित कोड में प्रस्तुत दो कार्यों की तुलना करें। उनमें से एक साधारण है, दूसरा तीर है।

 const test = { name: 'test object', createAnonFunction: function() {   return function() {     console.log(this.name);     console.log(arguments);   }; }, createArrowFunction: function() {   return () => {     console.log(this.name);     console.log(arguments);   }; } }; 

दो तरीकों के साथ एक test वस्तु है। उनमें से प्रत्येक एक फ़ंक्शन है जो एक अनाम फ़ंक्शन बनाता है और लौटाता है। इन विधियों के बीच अंतर केवल इतना है कि उनमें से पहले में पारंपरिक कार्यात्मक अभिव्यक्ति का उपयोग किया जाता है, और दूसरे में - तीर फ़ंक्शन।

यदि हम कंसोल में इस कोड के साथ प्रयोग करते हैं, तो उसी तरीके से ऑब्जेक्ट के तरीकों को पास करते हैं, फिर भी तरीके बहुत समान हैं, हमें अलग-अलग परिणाम मिलेंगे:

 > const anon = test.createAnonFunction('hello', 'world'); > const arrow = test.createArrowFunction('hello', 'world'); > anon(); undefined {} > arrow(); test object { '0': 'hello', '1': 'world' } 

एक अनाम फ़ंक्शन का अपना संदर्भ होता है, इसलिए जब इसे कहा जाता है, जब आप test.name कहते हैं, तो ऑब्जेक्ट की name संपत्ति का मान test.name नहीं किया जाएगा, और जब आप arguments कहते arguments , तो फ़ंक्शन के तर्कों की सूची जो जांच के तहत फ़ंक्शन को बनाने और वापस करने के लिए उपयोग नहीं की गई थी।

एक तीर फ़ंक्शन के मामले में, यह पता चलता है कि इसका संदर्भ उस फ़ंक्शन के संदर्भ के साथ मेल खाता है जिसने इसे बनाया है, जो इसे इस फ़ंक्शन द्वारा पारित तर्कों की सूची और वस्तु के name संपत्ति दोनों तक पहुंच प्रदान करता है जो कि यह फ़ंक्शन का एक तरीका है।

ऐसे सिचुएशन जिनमें एरो फ़ंक्शंस कोड में सुधार करते हैं

▍ मानों की सूची बनाना

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

उदाहरण के लिए, यदि map सरणी विधि का उपयोग करके परिवर्तित किए जाने वाले मानों की एक सरणी है, तो ऐसे रूपांतरण का वर्णन करने के लिए एक तीर फ़ंक्शन आदर्श है:

 const words = ['hello', 'WORLD', 'Whatever']; const downcasedWords = words.map(word => word.toLowerCase()); 

यहाँ तीर फ़ंक्शंस के समान उपयोग का एक अत्यंत सामान्य उदाहरण है, जिसमें वस्तुओं के गुणों के साथ काम करना शामिल है:

 const names = objects.map(object => object.name); 

इसी तरह, यदि पारंपरिक छोरों के बजाय वे आधुनिक forEach -आधारित forEach -लूप का उपयोग करते हैं, तो यह तीर फ़ंक्शंस मूल इकाई का उपयोग करता है, उनके उपयोग को सहज बनाता है:

 this.examples.forEach(example => { this.runExample(example); }); 

। वादा और जंजीरों का वादा

एक और स्थिति जहां तीर फ़ंक्शंस आपको क्लीनर लिखने की अनुमति देता है और अतुल्यकालिक सॉफ़्टवेयर कंस्ट्रक्शंस द्वारा अधिक कोड समझा जाता है।

इसलिए, वादे अतुल्यकालिक कोड के साथ काम को सरल बनाते हैं। एक ही समय में, भले ही आप async / प्रतीक्षा निर्माण का उपयोग करना पसंद करते हैं , आप वादों को समझे बिना नहीं कर सकते, क्योंकि यह निर्माण उन पर आधारित है।

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

यह तीर फ़ंक्शन का उपयोग करने के लिए एक आदर्श स्थान है, खासकर यदि परिणामी फ़ंक्शन का एक निश्चित राज्य है, तो ऑब्जेक्ट में कुछ को संदर्भित करता है। उदाहरण के लिए, यह इस तरह दिख सकता है:

 this.doSomethingAsync().then((result) => { this.storeResult(result); }); 

▍ वस्तु परिवर्तन

एरो फ़ंक्शंस के लिए एक और आम उपयोग मामला ऑब्जेक्ट ट्रांसफ़ॉर्मेशन को एनकैप्सुलेट करना है।

उदाहरण के लिए, Vue.js में, mapState का उपयोग करके सीधे Vue घटक में Vuex संग्रहण टुकड़े शामिल करने के लिए एक सामान्य पैटर्न है ।

इस ऑपरेशन में "कन्वर्टर्स" के एक सेट की घोषणाएं शामिल हैं जो प्रारंभिक पूर्ण राज्य से एक विशेष घटक के लिए वास्तव में क्या आवश्यक है का चयन करें।

ये सरल रूपांतरण तीर फ़ंक्शन का उपयोग करने के लिए सही जगह हैं। उदाहरण के लिए:

 export default { computed: {   ...mapState({     results: state => state.results,     users: state => state.users,   }); } } 

ऐसे सिचुएशन जिनमें एरो फंक्शन्स का इस्तेमाल नहीं किया जाना चाहिए

▍ वस्तु विधियाँ

ऐसी कई स्थितियां हैं जिनमें तीर के कार्यों का उपयोग करना एक अच्छा विचार नहीं है। एरो फ़ंक्शंस, अगर हल्के ढंग से उपयोग किया जाता है, न केवल प्रोग्रामर की मदद करें, बल्कि समस्याओं का स्रोत भी बनें।

पहली ऐसी स्थिति वस्तु कार्यों के रूप में तीर के कार्यों का उपयोग करना है। निष्पादन संदर्भ और पारंपरिक कार्यों के लिए विशिष्ट this , यहाँ महत्वपूर्ण हैं।

एक समय में, "स्वचालित बाइंडिंग" के साथ तरीकों को बनाने के लिए वर्ग के गुणों और तीर के कार्यों के संयोजन का उपयोग करना लोकप्रिय था, अर्थात, जिन्हें इवेंट हैंडलर द्वारा उपयोग किया जा सकता है, लेकिन कक्षा के लिए बाध्य रहते हैं। यह कुछ इस तरह देखा गया:

 class Counter { counter = 0; handleClick = () => {   this.counter++; } } 

इसी तरह के निर्माण का उपयोग करना, भले ही handleClick फ़ंक्शन handleClick ईवेंट हैंडलर द्वारा बुलाया गया handleClick , और Counter क्लास की एक आवृत्ति के संदर्भ में नहीं, इस फ़ंक्शन के पास इस उदाहरण के डेटा तक पहुंच थी।

हालांकि, इस दृष्टिकोण में बहुत सारे मंत्री हैं, जिनके लिए यह सामग्री समर्पित है।

हालांकि, यहां एक तीर फ़ंक्शन का उपयोग, निश्चित रूप से, एक फ़ंक्शन को बांधने का एक सुविधाजनक तरीका है, इस फ़ंक्शन का व्यवहार कई पहलुओं में सहज ज्ञान युक्त है, परीक्षण में हस्तक्षेप करना और ऐसी स्थितियों में समस्या पैदा करना, जहां, उदाहरण के लिए, वे एक प्रोटोटाइप के रूप में संबंधित ऑब्जेक्ट का उपयोग करने का प्रयास करते हैं।

ऐसे मामलों में, तीर के कार्यों के बजाय, सामान्य कार्यों का उपयोग करें, और, यदि आवश्यक हो, तो उन्हें कंस्ट्रक्टर में ऑब्जेक्ट के एक उदाहरण से बांधें:

 class Counter { counter = 0; handleClick() {   this.counter++; } constructor() {   this.handleClick = this.handleClick.bind(this); } } 

Ongलंग कॉल चेन

एरो फ़ंक्शंस समस्याओं का एक स्रोत बन सकते हैं यदि उन्हें कई अलग-अलग संयोजनों में उपयोग करने की योजना बनाई जाती है, विशेष रूप से, फ़ंक्शन कॉल की लंबी श्रृंखलाओं में।

अनाम फ़ंक्शंस का उपयोग करते समय इस तरह की समस्याओं का मुख्य कारण यह है कि वे कॉल स्टैक ट्रेस के बेहद असंगत परिणाम देते हैं।

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

 {anonymous}() {anonymous}() {anonymous}() {anonymous}() {anonymous}() 

। गतिशील संदर्भ के साथ कार्य

जिन स्थितियों पर हम चर्चा कर रहे हैं, उनमें से आखिरी में तीर के कार्य मुसीबत का स्रोत बन सकते हैं, उनका उपयोग करना है जहां आपको एक गतिशील this बंधन की आवश्यकता होती है।

यदि ऐसी स्थितियों में तीर फ़ंक्शन का उपयोग किया जाता है, तो गतिशील this बंधन काम नहीं करेगा। यह अप्रिय आश्चर्य किसी के लिए पहेली का कारण बन सकता है कि उन लोगों के साथ क्या होता है जिन्हें कोड के साथ काम करना पड़ता है जिसमें तीर फ़ंक्शन का गलत तरीके से उपयोग किया जाता है।

तीर कार्यों का उपयोग करते समय ध्यान रखने योग्य कुछ बातें यहां दी गई हैं:

• ईवेंट हैंडलर को currentTarget ईवेंट विशेषता के लिए बाध्य किया जाता है।
• यदि आप अभी भी jQuery का उपयोग कर रहे हैं, तो विचार करें कि अधिकांश jQuery के तरीके इसे चयनित DOM तत्व से बाँधते हैं।
• यदि आप Vue.js का उपयोग करते हैं, तो आमतौर पर विधियां और गणना किए गए कार्य इसे Vue घटक से जोड़ते हैं।

बेशक, सॉफ्टवेयर सिस्टम के मानक व्यवहार को बदलने के लिए जानबूझकर तीर फ़ंक्शन का उपयोग किया जा सकता है। लेकिन, विशेष रूप से jQuery और Vue के मामलों में, यह अक्सर सिस्टम के सामान्य कामकाज के साथ संघर्ष करता है, जो इस तथ्य की ओर जाता है कि प्रोग्रामर समझ नहीं पाता है कि क्यों कुछ कोड जो पूरी तरह से सामान्य दिखते हैं, अचानक काम करने से इनकार कर देते हैं।

परिणाम

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

प्रिय पाठकों! क्या आपने ऐसी स्थितियों का सामना किया है जिसमें तीर के कार्यों का उपयोग त्रुटियों, असुविधा या कार्यक्रमों के अप्रत्याशित व्यवहार की ओर जाता है?