शुरुआती के लिए जावास्क्रिप्ट शॉर्टकट

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

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, यह बंद करने के आंतरिक तंत्र और जावास्क्रिप्ट कार्यक्रमों में कैसे काम करती है, इसके बारे में एक कहानी को समर्पित है।

एक बंद क्या है?

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

एक शाब्दिक वातावरण क्या है?

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

let a = 'global';  function outer() {    let b = 'outer';    function inner() {      let c = 'inner'      console.log(c);   // 'inner'      console.log(b);   // 'outer'      console.log(a);   // 'global'    }    console.log(a);     // 'global'    console.log(b);     // 'outer'    inner();  } outer(); console.log(a);         // 'global' 

यहां, inner() फ़ंक्शन का outer() फ़ंक्शन के दायरे में और वैश्विक दायरे में, अपने स्वयं के दायरे में घोषित चर तक पहुंच है। outer() फ़ंक्शन का अपने स्वयं के दायरे में और वैश्विक दायरे में घोषित चर तक पहुंच है।

उपरोक्त कोड की गुंजाइश श्रृंखला इस तरह दिखाई देगी:

 Global { outer {   inner } } 

ध्यान दें कि inner() फ़ंक्शन outer() फ़ंक्शन के शाब्दिक वातावरण से घिरा हुआ है, जो बदले में एक वैश्विक दायरे से घिरा हुआ है। यही कारण है कि inner() फ़ंक्शन outer() फ़ंक्शन और वैश्विक दायरे में घोषित चर तक पहुंच सकता है।

क्लोजर के व्यावहारिक उदाहरण

आंतरिक सर्किटरी की जटिलताओं को दूर करने से पहले विचार करें, कुछ व्यावहारिक उदाहरण।

1 उदाहरण संख्या १

 function person() { let name = 'Peter'; return function displayName() {   console.log(name); }; } let peter = person(); peter(); // 'Peter' 

यहां हम person() फ़ंक्शन को कॉल करते हैं, जो आंतरिक फ़ंक्शन displayName() , और इस फ़ंक्शन को चर peter में संग्रहीत करता है। जब, इसके बाद, हम peter() फ़ंक्शन को कॉल करते हैं peter() संबंधित चर वास्तव में displayName() फ़ंक्शन) के संदर्भ को संग्रहीत करता है, Peter नाम कंसोल में प्रदर्शित होता है।

उसी समय, displayName() फ़ंक्शन में नाम का एक चर नहीं होता है, इसलिए हम यह निष्कर्ष निकाल सकते हैं कि यह फ़ंक्शन किसी भी तरह से फ़ंक्शन में घोषित चर को बाहरी person() , उसके बाद भी एक्सेस कर सकता है। यह कार्य कैसे हुआ। शायद यह इसलिए है क्योंकि displayName() फ़ंक्शन वास्तव में एक क्लोजर है।

2 उदाहरण संख्या 2

 function getCounter() { let counter = 0; return function() {   return counter++; } } let count = getCounter(); console.log(count());  // 0 console.log(count());  // 1 console.log(count());  // 2 

यहां, पिछले उदाहरण की तरह, हम चर count में getCounter() फ़ंक्शन द्वारा वापस लौटे अनाम आंतरिक फ़ंक्शन के लिंक को संग्रहीत करते हैं। चूंकि count() फ़ंक्शन एक क्लोजर है, यह getCount() फ़ंक्शन के counter वेरिएबल तक पहुंच सकता है, क्योंकि getCounter() फ़ंक्शन ने अपना काम पूरा कर लिया है।

ध्यान दें कि हर बार count() फ़ंक्शन को counter चर का मान 0 पर रीसेट नहीं किया जाता है। ऐसा लग सकता है कि इसे 0 पर रीसेट किया जाना चाहिए, क्योंकि यह एक नियमित फ़ंक्शन को कॉल करते समय होगा, लेकिन ऐसा नहीं होता है।

यह ठीक उसी तरह काम करता है क्योंकि हर बार count() फ़ंक्शन को कहा जाता है, इसके लिए एक नया स्कोप बनाया जाता है, लेकिन getCounter() फ़ंक्शन के लिए केवल एक गुंजाइश है। चूंकि counter वेरिएबल getCounter() फ़ंक्शन के दायरे में घोषित किया गया है, लेकिन getCounter() फ़ंक्शन के बीच इसका मान 0 पर रीसेट किए बिना सहेजा जाता है।

शॉर्ट सर्किट कैसे काम करते हैं?

अब तक, हमने बात की है कि क्लोजर क्या हैं, और व्यावहारिक उदाहरणों की जांच की। अब चलो आंतरिक जावास्क्रिप्ट तंत्र के बारे में बात करते हैं जो उन्हें काम करते हैं।

क्लोजर को समझने के लिए, हमें दो महत्वपूर्ण जावास्क्रिप्ट अवधारणाओं से निपटना होगा। यह एक्जेक्यूट कॉन्सेप्ट और लेक्सिकल एनवायरनमेंट है।

▍ निष्पादन संदर्भ

निष्पादन संदर्भ एक अमूर्त वातावरण है जिसमें जावास्क्रिप्ट कोड की गणना और निष्पादित किया जाता है। जब वैश्विक कोड निष्पादित किया जाता है, तो यह वैश्विक निष्पादन संदर्भ के अंदर होता है। फ़ंक्शन कोड को फ़ंक्शन के संदर्भ में निष्पादित किया जाता है।

किसी समय में, कोड को केवल एक निष्पादन संदर्भ में निष्पादित किया जा सकता है (जावास्क्रिप्ट एक एकल-थ्रेडेड प्रोग्रामिंग भाषा है)। इन प्रक्रियाओं को तथाकथित कॉल स्टैक का उपयोग करके प्रबंधित किया जाता है।

कॉल स्टैक एक डेटा संरचना है जो LIFO सिद्धांत (लास्ट इन, फर्स्ट आउट - लास्ट इन, फर्स्ट आउट) के अनुसार व्यवस्थित है। नए तत्वों को केवल स्टैक के शीर्ष पर रखा जा सकता है, और केवल तत्वों को इससे हटाया जा सकता है।

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

निष्पादन के संदर्भ और कॉल स्टैक क्या हैं, यह समझने के लिए निम्नलिखित उदाहरण पर विचार करें:


निष्पादन संदर्भ उदाहरण

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

इस कोड का कॉल स्टैक इस तरह दिखता है:


कॉल स्टैक

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

▍लक्ष्म पर्यावरण

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

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

शाब्दिक वातावरण में दो घटक होते हैं:

• एक पर्यावरण रिकॉर्ड वह जगह है जहां चर और फ़ंक्शन घोषणाओं को संग्रहीत किया जाता है।
• बाहरी वातावरण का संदर्भ - एक लिंक जो आपको बाहरी (मूल) लेक्सिकल वातावरण तक पहुंचने की अनुमति देता है। यह सबसे महत्वपूर्ण घटक है जिसे क्लोज़र को समझने के लिए निपटाया जाना चाहिए।

वैचारिक रूप से, शाब्दिक वातावरण इस तरह दिखता है:

 lexicalEnvironment = { environmentRecord: {   <identifier> : <value>,   <identifier> : <value> } outer: < Reference to the parent lexical environment> } 

निम्नलिखित कोड स्निपेट पर एक नज़र डालें:

 let a = 'Hello World!'; function first() { let b = 25;  console.log('Inside first function'); } first(); console.log('Inside global execution context'); 

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

 globalLexicalEnvironment = { environmentRecord: {     a : 'Hello World!',     first : < reference to function object > } outer: null } 

कृपया ध्यान दें कि बाहरी लेक्सिकल वातावरण ( outer ) के संदर्भ को null सेट किया गया है, क्योंकि वैश्विक गुंजाइश में बाहरी लेक्सिकल वातावरण नहीं है।

जब इंजन first() फ़ंक्शन के लिए निष्पादन संदर्भ बनाता है, तो यह निष्पादन के दौरान इस फ़ंक्शन में घोषित चर को संग्रहीत करने के लिए एक शाब्दिक वातावरण भी बनाता है। नतीजतन, फ़ंक्शन का शाब्दिक वातावरण इस तरह दिखाई देगा:

 functionLexicalEnvironment = { environmentRecord: {     b : 25, } outer: <globalLexicalEnvironment> } 

फ़ंक्शन के बाहरी शाब्दिक वातावरण का लिंक <globalLexicalEnvironment> सेट है, क्योंकि स्रोत कोड में फ़ंक्शन कोड वैश्विक दायरे में है।

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

क्लोजर के साथ काम करने के उदाहरणों का विस्तृत विश्लेषण

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

1 उदाहरण संख्या १

इस कोड स्निपेट पर एक नज़र डालें:

 function person() { let name = 'Peter'; return function displayName() {   console.log(name); }; } let peter = person(); peter(); // 'Peter' 

जब person() फ़ंक्शन को निष्पादित किया जाता है, तो JS इंजन इस फ़ंक्शन के लिए एक नया निष्पादन संदर्भ और एक नया शाब्दिक वातावरण बनाता है। कार्य समाप्त करना, फ़ंक्शन displayName() फ़ंक्शन देता है, इस फ़ंक्शन का एक संदर्भ चर peter को लिखा जाता है।

उसका शाब्दिक वातावरण इस तरह दिखेगा:

 personLexicalEnvironment = { environmentRecord: {   name : 'Peter',   displayName: < displayName function reference> } outer: <globalLexicalEnvironment> } 

जब person() फ़ंक्शन बाहर निकलता है, तो इसका निष्पादन संदर्भ स्टैक से पॉप होता है। लेकिन इसका शाब्दिक वातावरण स्मृति में बना रहता है, क्योंकि इसके आंतरिक कार्य प्रदर्शन के शाब्दिक वातावरण में एक लिंक है displayName() । परिणामस्वरूप, इस शाब्दिक वातावरण में घोषित चर उपलब्ध रहते हैं।

जब peter() फ़ंक्शन को कहा जाता है (संबंधित चर प्रदर्शननाम displayName() फ़ंक्शन के लिए एक संदर्भ संग्रहीत करता है), जेएस इंजन इस फ़ंक्शन के लिए एक नया निष्पादन संदर्भ और एक नया शाब्दिक वातावरण बनाता है। यह शाब्दिक वातावरण इस तरह दिखेगा:

 displayNameLexicalEnvironment = { environmentRecord: {   } outer: <personLexicalEnvironment> } 

displayName() फ़ंक्शन में कोई चर नहीं हैं, इसलिए इसका पर्यावरण रिकॉर्ड खाली होगा। इस फ़ंक्शन के निष्पादन के दौरान, जेएस इंजन फ़ंक्शन के शाब्दिक वातावरण में name चर खोजने की कोशिश करेगा।

चूँकि displayName() फ़ंक्शन के लेक्सिकल वातावरण में खोज को नहीं पाया जा सकता है, यह खोज बाहरी लेक्सिकल वातावरण में, अर्थात् person() के लेक्सिकल वातावरण person() फ़ंक्शन में जारी रहेगी, जो अभी भी स्मृति में है। वहां, इंजन वांछित चर पाता है और कंसोल में इसका मूल्य प्रदर्शित करता है।

2 उदाहरण संख्या 2

 function getCounter() { let counter = 0; return function() {   return counter++; } } let count = getCounter(); console.log(count());  // 0 console.log(count());  // 1 console.log(count());  // 2 

getCounter() फ़ंक्शन का शाब्दिक वातावरण इस तरह दिखेगा:

 getCounterLexicalEnvironment = { environmentRecord: {   counter: 0,   <anonymous function> : < reference to function> } outer: <globalLexicalEnvironment> } 

यह फ़ंक्शन एक अनाम फ़ंक्शन लौटाता है जिसे count वेरिएबल में असाइन किया गया है।

जब count() फ़ंक्शन निष्पादित होता है, तो इसका शाब्दिक वातावरण इस तरह दिखता है:

 countLexicalEnvironment = { environmentRecord: { } outer: <getCountLexicalEnvironment> } 

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

इंजन चर पाता है, इसे कंसोल में प्रदर्शित करता है, और counter चर को बढ़ाता है, जो getCounter() फ़ंक्शन के शाब्दिक वातावरण में संग्रहीत होता है।

परिणामस्वरूप, count() लिए पहली कॉल के बाद getCounter() फ़ंक्शन का शाब्दिक वातावरण इस तरह दिखाई देगा:

 getCounterLexicalEnvironment = { environmentRecord: {   counter: 1,   <anonymous function> : < reference to function> } outer: <globalLexicalEnvironment> } 

हर बार count() फ़ंक्शन को कहा जाता है, जावास्क्रिप्ट इंजन इस फ़ंक्शन के लिए एक नया शाब्दिक वातावरण बनाता है और counter चर को बढ़ाता है, जिससे getCounter() फ़ंक्शन के शाब्दिक वातावरण में परिवर्तन होता है।

परिणाम

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

प्रिय पाठकों! यदि आपके पास जेएस विकास का अनुभव है, तो शुरुआती लोगों के साथ क्लोजर का उपयोग करने के व्यावहारिक उदाहरण साझा करें।