कार्यात्मक जावास्क्रिप्ट: उच्च-क्रम के कार्य क्या हैं और उनकी आवश्यकता क्यों है?

"एक उच्च क्रम के कार्य" उन वाक्यांशों में से एक है जो अक्सर बिखरे हुए होते हैं। लेकिन शायद ही कोई रोक सकता है और समझा सकता है कि यह क्या है। आप पहले से ही जान सकते हैं कि उच्च-क्रम वाले कार्य क्या कहलाते हैं। लेकिन हम वास्तविक परियोजनाओं में उनका उपयोग कैसे करते हैं? वे कब और क्यों सहायक हैं? क्या हम उनकी मदद से DOM में हेरफेर कर सकते हैं? या जो लोग इन सुविधाओं का उपयोग करते हैं वे सिर्फ दिखावा करते हैं? शायद वे जानबूझकर कोड को जटिल करते हैं?

मैं समझता था कि उच्च-क्रम के कार्य उपयोगी हैं। अब मैं उन्हें भाषा के रूप में जावास्क्रिप्ट की सबसे महत्वपूर्ण संपत्ति मानता हूं। लेकिन इससे पहले कि हम इस पर चर्चा करें, आइए पहले पता करें कि वास्तव में उच्च-क्रम के कार्य क्या हैं। और हम चर के रूप में कार्य के साथ शुरू करेंगे।

प्रथम श्रेणी की वस्तुओं के रूप में कार्य

जावास्क्रिप्ट में, एक नया फ़ंक्शन लिखने के लिए कम से कम तीन तरीके (कुल में अधिक हैं) हैं। सबसे पहले, आप एक फ़ंक्शन घोषणा लिख सकते हैं:

// Take a DOM element and wrap it in a list item element. function itemise(el) { const li = document.createElement('li'); li.appendChild(el); return li; } 

मुझे उम्मीद है कि आप सब कुछ समझ गए होंगे। इसके अलावा, आप शायद जानते हैं कि आप एक फ़ंक्शन अभिव्यक्ति लिख सकते हैं:

 const itemise = function(el) { const li = document.createElement('li'); li.appendChild(el); return li; } 

और अंत में, एक ही फ़ंक्शन लिखने का एक और तरीका है - एक तीर फ़ंक्शन के रूप में :

 const itemise = (el) => { const li = document.createElement('li'); li.appendChild(el); return li; } 

इस मामले में, सभी तीन विधियां समान हैं। हालांकि यह हमेशा नहीं होता है, व्यवहार में, प्रत्येक विधि में किसी विशेष कीवर्ड के जादू के साथ जुड़े छोटे अंतर होते हैं और स्टैक के निशान में लेबल होते हैं।

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

• चर के लिए कार्य असाइन करें।
  
• अन्य कार्यों के तर्क के रूप में कार्य करें।
  
• अन्य कार्यों से वापसी।
  

यह अद्भुत है, लेकिन उच्च आदेश कार्यों के साथ यह सब क्या करना है? अंतिम दो बिंदुओं पर ध्यान दें। जल्द ही हम उनके पास लौट आएंगे, लेकिन अब कुछ उदाहरणों पर गौर करेंगे।

हमने चर के लिए कार्यों का असाइनमेंट देखा। उन्हें मापदंडों के रूप में पारित करने के बारे में क्या? आइए एक फ़ंक्शन लिखें जो डोम तत्वों के साथ उपयोग किया जा सकता है। यदि हम document.querySelectorAll() निष्पादित document.querySelectorAll() , तो बदले में हमें एक सरणी नहीं, बल्कि एक NodeList मिलेगा। NodeList पास एक .map() पद्धति नहीं है, जैसे सरणियाँ, इसलिए हम इसे लिखते हैं:

 // Apply a given function to every item in a NodeList and return an array. function elListMap(transform, list) { // list might be a NodeList, which doesn't have .map(), so we convert // it to an array. return [...list].map(transform); } // Grab all the spans on the page with the class 'for-listing'. const mySpans = document.querySelectorAll('span.for-listing'); // Wrap each one inside an <li> element. We re-use the // itemise() function from earlier. const wrappedList = elListMap(itemise, mySpans); 

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

 function addSpinnerClass(el) { el.classList.add('spinner'); return el; } // Find all the buttons with class 'loader' const loadButtons = document.querySelectorAll('button.loader'); // Add the spinner class to all the buttons we found. elListMap(addSpinnerClass, loadButtons); 

elLlistMap पैरामीटर के रूप में एक और फ़ंक्शन लेता है और कनवर्ट करता है। यही है, हम अलग-अलग समस्याओं को हल करने के लिए elListMap का उपयोग कर सकते हैं।

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

सबसे पहले, हम सामान्य पुराने फ़ंक्शन को लिखते हैं। हमें li तत्वों की सूची लेने और ul में लपेटने की आवश्यकता है। आसान:

 function wrapWithUl(children) { const ul = document.createElement('ul'); return [...children].reduce((listEl, child) => { listEl.appendChild(child); return listEl; }, ul); } 

और फिर अगर हमारे पास पैराग्राफ तत्वों का एक गुच्छा है जिसे हम एक div में लपेटना चाहते हैं? कोई बात नहीं, हम इसके लिए एक और फ़ंक्शन लिखेंगे:

 function wrapWithDiv(children) { const div = document.createElement('div'); return [...children].reduce((divEl, child) => { divEl.appendChild(child); return divEl; }, div); } 

यह बहुत अच्छा काम करता है। हालांकि, ये दो कार्य बहुत समान हैं, एकमात्र अंतर उस मूल तत्व में है जिसे हमने बनाया है।

अब हम एक फ़ंक्शन लिख सकते हैं जो दो मापदंडों को लेता है: मूल तत्व का प्रकार और बाल तत्वों की सूची। लेकिन एक और विकल्प है। हम एक फंक्शन बना सकते हैं जो एक फंक्शन लौटाता है। उदाहरण के लिए:

 function createListWrapperFunction(elementType) { // Straight away, we return a function. return function wrap(children) { // Inside our wrap function, we can 'see' the elementType parameter. const parent = document.createElement(elementType); return [...children].reduce((parentEl, child) => { parentEl.appendChild(child); return parentEl; }, parent); } } 

यह पहली बार में थोड़ा जटिल लग सकता है, तो चलिए कोड को विभाजित करते हैं। हमने एक ऐसा फंक्शन बनाया जो सिर्फ एक और फंक्शन देता है। लेकिन यह रिटर्न फंक्शन elementType पैरामीटर को याद elementType है। और फिर, जब हम लौटे फ़ंक्शन को कॉल करते हैं, तो यह पहले से ही जानता है कि किस तत्व को बनाना है। इसलिए, आप wrapWithUl और wrapWithDiv बना सकते हैं:

 const wrapWithUl = createListWrapperFunction('ul'); // Our wrapWithUl() function now 'remembers' that it creates a ul element. const wrapWithDiv = createListWreapperFunction('div'); // Our wrapWithDiv() function now 'remembers' that it creates a div element. 

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

इसलिए, हमने हल किया:

• एक फंक्शन को एक वैरिएबल पर असाइन करना।
  
• एक फ़ंक्शन को एक पैरामीटर के रूप में पास करना।
  
• दूसरे फ़ंक्शन से एक फ़ंक्शन लौटा रहा है ...
  

सामान्य तौर पर, प्रथम श्रेणी के कार्य एक सुखद बात है। लेकिन उच्चतर क्रम का इससे क्या लेना-देना है? आइए परिभाषा को देखें।

उच्चतर क्रम क्या है?

परिभाषा : यह एक फ़ंक्शन है जो फ़ंक्शन को तर्क के रूप में लेता है या परिणामस्वरूप फ़ंक्शन देता है।

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

उच्च-क्रम फ़ंक्शन उदाहरण

यदि आप देखना शुरू करते हैं, तो आप हर जगह उच्च-क्रम के कार्यों को नोटिस करना शुरू करते हैं। सबसे आम कार्य हैं जो अन्य कार्यों को मापदंडों के रूप में लेते हैं।

कार्य जो पैरामीटर के रूप में अन्य कार्यों को लेते हैं

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

 function showAlert() { alert('Fallacies do not cease to be fallacies because they become fashions'); } document.body.innerHTML += `<button type="button" class="js-alertbtn"> Show alert </button>`; const btn = document.querySelector('.js-alertbtn'); btn.addEventListener('click', showAlert); 

यहां हमने एक फ़ंक्शन बनाया जो एक चेतावनी दिखाता है, पृष्ठ पर एक बटन जोड़ा गया, और showAlert() तर्क के रूप में showAlert() फ़ंक्शन पारित किया।

जब हम सरणी पुनरावृत्ति विधियों का उपयोग करते हैं, तो हम उच्च क्रम वाले कार्यों का भी सामना करते हैं : उदाहरण के लिए, .filter() और .reduce() । जैसे elListMap() फ़ंक्शन:

 function elListMap(transform, list) { return [...list].map(transform); } 

उच्च-क्रम के कार्य भी देरी और समय के साथ काम करने में मदद करते हैं। setTimeout() और setInterval() फ़ंक्शन को निष्पादित करने पर नियंत्रण को नियंत्रित करने में मदद करता है। उदाहरण के लिए, यदि आपको 30 सेकंड के बाद highlight क्लास को हटाने की आवश्यकता है, तो आप इसे इस तरह कर सकते हैं:

 function removeHighlights() { const highlightedElements = document.querySelectorAll('.highlighted'); elListMap(el => el.classList.remove('highlighted'), highlightedElements); } setTimeout(removeHighlights, 30000); 

फिर से, हमने एक फ़ंक्शन बनाया और एक तर्क के रूप में इसे दूसरे फ़ंक्शन में पास कर दिया।

जैसा कि आप देख सकते हैं, जावास्क्रिप्ट में अक्सर ऐसे फ़ंक्शन होते हैं जो अन्य कार्यों को स्वीकार करते हैं। और आप शायद पहले से ही उनका उपयोग करते हैं।

फ़ंक्शंस रिटर्निंग फ़ंक्शंस

इस तरह के कार्य पिछले वाले के रूप में अक्सर नहीं पाए जाते हैं। लेकिन वे उपयोगी भी हैं। सबसे अच्छा उदाहरणों में से एक शायद () फ़ंक्शन है। मैंने ऑलॉन्ग जावास्क्रिप्ट पुस्तक से एक संस्करण को अनुकूलित किया:

 function maybe(fn) return function _maybe(...args) { // Note that the == is deliberate. if ((args.length === 0) || args.some(a => (a == null)) { return undefined; } return fn.apply(this, args); } } 

कोड को समझने के बजाय, आइए पहले देखें कि इसे कैसे लागू किया जा सकता है। आइए elListMap() फ़ंक्शन को elListMap() :

 // Apply a given function to every item in a NodeList and return an array. function elListMap(transform, list) { // list might be a NodeList, which doesn't have .map(), so we convert // it to an array. return [...list].map(transform); } 

क्या होगा यदि मैं गलती से अशक्त या अपरिभाषित मान को elListMap() कर elListMap() ? हमें एक TypeError और वर्तमान ऑपरेशन की गिरावट मिलेगी, जो भी हो। यह maybe() समारोह के साथ बचा जा सकता है:

 const safeElListMap = maybe(elListMap); safeElListMap(x => x, null); // ￩ undefined 

गिरने के बजाय, फ़ंक्शन undefined वापस आ जाएगा। और अगर हम इसे maybe() द्वारा संरक्षित एक अन्य फ़ंक्शन में पारित कर देते हैं, तो हम फिर से undefined हो जाएंगे। maybe() किसी भी संख्या में कार्यों की सुरक्षा कर सके, if एक बिलियन लिखना बहुत आसान है।

फ़ंक्शंस दुनिया में रिटर्न फ़ंक्शंस भी आम हैं। उदाहरण के लिए, connect() ।

तो आगे क्या है?

हमने उच्च-क्रम के कार्यों का उपयोग करने के कई उदाहरण देखे। तो आगे क्या है? वे हमें क्या दे सकते हैं जो हमें उनके बिना नहीं मिल सकता है?

इस प्रश्न का उत्तर देने के लिए, आइए एक और उदाहरण देखें - बिल्ट-इन .sort() विधि। हां, उसकी खामियां हैं। यह एक नया लौटने के बजाय सरणी को बदलता है। लेकिन अब इसके बारे में भूल जाते हैं। .sort() विधि एक उच्च-क्रम फ़ंक्शन है, यह मापदंडों में से एक के रूप में एक और फ़ंक्शन लेता है।

यह कैसे काम करता है? यदि हम संख्याओं की एक संख्या को क्रमबद्ध करना चाहते हैं, तो हमें सबसे पहले एक तुलनात्मक फ़ंक्शन बनाना होगा:

 function compareNumbers(a, b) { if (a === b) return 0; if (a > b) return 1; /* else */ return -1; } 

अब क्रमबद्ध करें:

 let nums = [7, 3, 1, 5, 8, 9, 6, 4, 2]; nums.sort(compareNumbers); console.log(nums); // 〕[1, 2, 3, 4, 5, 6, 7, 8, 9] 

आप संख्याओं की सूची क्रमित कर सकते हैं। लेकिन क्या अच्छा है? सॉर्ट करने के लिए हमारे पास कितनी बार संख्याओं की सूची होती है? अक्सर नहीं। आमतौर पर मुझे वस्तुओं की एक सरणी को सॉर्ट करने की आवश्यकता होती है:

 let typeaheadMatches = [ { keyword: 'bogey', weight: 0.25, matchedChars: ['bog'], }, { keyword: 'bog', weight: 0.5, matchedChars: ['bog'], }, { keyword: 'boggle', weight: 0.3, matchedChars: ['bog'], }, { keyword: 'bogey', weight: 0.25, matchedChars: ['bog'], }, { keyword: 'toboggan', weight: 0.15, matchedChars: ['bog'], }, { keyword: 'bag', weight: 0.1, matchedChars: ['b', 'g'], } ]; 

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

 function compareTypeaheadResult(word1, word2) { return -1 * compareNumbers(word1.weight, word2.weight); } typeaheadMatches.sort(compareTypeaheadResult); console.log(typeaheadMatches); // 〕[{keyword: "bog", weight: 0.5, matchedChars: ["bog"]}, … ] 

आप किसी भी प्रकार के सरणी के लिए एक तुलनात्मक फ़ंक्शन लिख सकते हैं। .sort() विधि हमारी मदद करती है: “यदि आप मुझे एक तुलनात्मक कार्य देते हैं, तो मैं किसी भी सरणी को .sort() । इसकी सामग्री के बारे में चिंता न करें। यदि आप एक प्रकार का कार्य देते हैं, तो मैं इसे क्रमबद्ध करूंगा। " इसलिए, हमें अपने आप पर एक छँटाई एल्गोरिथ्म लिखने की ज़रूरत नहीं है, हम दो तत्वों की तुलना करने के बहुत सरल कार्य पर ध्यान केंद्रित करेंगे।

अब कल्पना करें कि हम उच्च क्रम के कार्यों का उपयोग नहीं कर रहे हैं। हम एक फ़ंक्शन को .sort() विधि से पारित नहीं कर सकते हैं। हमें हर बार एक अलग प्रकार की एक सरणी को सॉर्ट करने के लिए एक नया सॉर्ट फ़ंक्शन लिखना होगा। या आपको फ़ंक्शन पॉइंटर्स या ऑब्जेक्ट्स के साथ एक ही चीज़ को फिर से करना होगा। किसी भी मामले में, यह बहुत अजीब तरह से बाहर निकल जाएगा।

हालाँकि, हमारे पास उच्च आदेश कार्य हैं जो हमें तुलना फ़ंक्शन से सॉर्ट फ़ंक्शन को अलग करने की अनुमति देते हैं। कहते हैं कि एक स्मार्ट ब्राउज़र डेवलपर ने तेज एल्गोरिथ्म का उपयोग करने के लिए .sort() अपडेट किया है। फिर आपका कोड केवल जीत जाएगा, भले ही सॉर्टेबल सरणियों के अंदर क्या हो। और यह योजना उच्च आदेश सरणियों के कार्यों के एक पूरे सेट के लिए सही है।

यह हमें इस तरह के विचार की ओर ले जाता है। .sort() विधि सरणी की सामग्री से छँटाई कार्य को सार करती है। इसे चिंताओं का पृथक्करण कहा जाता है। उच्च-क्रम के कार्य आपको अमूर्त बनाने की अनुमति देते हैं कि उनके बिना बहुत बोझिल या असंभव होगा। और सार का निर्माण सॉफ्टवेयर इंजीनियरों के काम का 80% है।

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

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

उच्च-क्रम कार्यों के बारे में अतिरिक्त सामग्री:

• उच्च-क्रम के कार्य : एलोकेंट जावास्क्रिप्ट से पांचवां अध्याय।
  
• उच्च-क्रम के कार्य : कम्पोज़िंग सोफ़वेयर लेख श्रृंखला का हिस्सा।
  
• जावास्क्रिप्ट में उच्चतर कार्य ।
  

आप शायद पहले से ही उच्च आदेश कार्यों का उपयोग कर रहे हैं। यह जावास्क्रिप्ट में इतना आसान है कि हम इसके बारे में सोचते भी नहीं हैं। लेकिन यह जानना बेहतर है कि लोग इस वाक्यांश के बारे में क्या बात कर रहे हैं। यह मुश्किल नहीं है। लेकिन एक साधारण विचार के पीछे बहुत शक्ति निहित है।

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