लूपमध्ये जावास्क्रिप्ट क्लोजर समजून घेणे: व्यावहारिक उदाहरणे

JavaScript मध्ये उलगडणारी लूप क्लोजर

जावास्क्रिप्ट डेव्हलपरना लूपच्या आत क्लोजर वापरताना अनेकदा अनपेक्षित वर्तनाचा सामना करावा लागतो. या समस्येमुळे गोंधळ होऊ शकतो, विशेषत: जे लोक बंद करण्याच्या संकल्पनेसाठी नवीन आहेत त्यांच्यासाठी.

या लेखात, आम्ही व्यावहारिक उदाहरणे एक्सप्लोर करू जे सामान्य त्रुटींचे वर्णन करतात आणि लूपमध्ये प्रभावीपणे क्लोजर वापरण्यासाठी उपाय प्रदान करतात, इव्हेंट श्रोते, असिंक्रोनस कोड किंवा ॲरेवर पुनरावृत्ती करणे असो.

आज्ञा	वर्णन
let	ब्लॉक-स्कोप केलेले लोकल व्हेरिएबल घोषित करते, पर्यायाने ते व्हॅल्यूमध्ये सुरू करते. लूपच्या प्रत्येक पुनरावृत्तीची स्वतःची व्याप्ती आहे याची खात्री करण्यासाठी वापरला जातो.
const	ब्लॉक-स्कॉप्ड, केवळ-वाचनीय स्थिरांक घोषित करते. फंक्शन किंवा व्हेरिएबल तयार करण्यासाठी वापरले जाते ज्याचे मूल्य बदलू नये.
Promise	असिंक्रोनस ऑपरेशनची अंतिम पूर्णता (किंवा अयशस्वी) आणि त्याचे परिणामी मूल्य दर्शवते.
setTimeout	फंक्शन कॉल करते किंवा निर्दिष्ट संख्येच्या मिलीसेकंद नंतर अभिव्यक्तीचे मूल्यांकन करते.
addEventListener	विद्यमान इव्हेंट हँडलर ओव्हरराईट न करता निर्दिष्ट घटकास इव्हेंट हँडलर संलग्न करते.
IIFE	त्वरित कार्य अभिव्यक्ती आमंत्रित केले. एक फंक्शन जे परिभाषित केल्याप्रमाणे चालते. लूपमध्ये स्थानिक स्कोप तयार करण्यासाठी वापरले जाते.
for...in	एका अनियंत्रित क्रमाने, ऑब्जेक्टच्या असंख्य गुणधर्मांवर पुनरावृत्ती होते.
for...of	पुनरावृत्ती करता येण्याजोग्या ऑब्जेक्टच्या मूल्यांवर (जसे की ॲरे किंवा स्ट्रिंग) विशिष्ट क्रमाने पुनरावृत्ती होते.

लूपमध्ये JavaScript क्लोजर समजून घेणे

मागील उदाहरणांमध्ये दिलेल्या स्क्रिप्ट्स JavaScript मधील लूपमध्ये बंद होण्याच्या सामान्य समस्येचे निराकरण करतात. वापरताना ए लूपमधील घोषणा, सर्व पुनरावृत्ती समान फंक्शन स्कोप सामायिक करतात. म्हणूनच, पहिल्या उदाहरणात, आउटपुट तीन वेळा "माझे मूल्य: 3" आहे. उपाय वापरणे आहे , जे ब्लॉक स्कोप तयार करते जे प्रत्येक पुनरावृत्तीसाठी योग्य मूल्य राखते. हा दृष्टिकोन सुनिश्चित करतो की प्रत्येक पुनरावृत्तीची स्वतःची व्याप्ती आहे, अशा प्रकारे जेव्हा फंक्शन कॉल केले जाते तेव्हा योग्य मूल्य जतन केले जाते. स्क्रिप्ट वरून घोषणा कशी बदलते हे दर्शवते करण्यासाठी १ समस्येचे निराकरण करते आणि हेतूनुसार "माझे मूल्य: 0", "माझे मूल्य: 1", आणि "माझे मूल्य: 2" लॉग करते.

असिंक्रोनस कोडसाठी, समान बंद करण्याची समस्या उद्भवू शकते. वापरत आहे आणि सह कार्य करते प्रत्येक असिंक्रोनस कॉल योग्य पुनरावृत्ती मूल्य राखते याची खात्री करते. स्क्रिप्ट वापरून दाखवते ७ सह , प्रत्येक निराकरण केलेले वचन अपेक्षित मूल्य लॉग करते. कार्यक्रम श्रोत्यांना देखील अशाच समस्यांचा सामना करावा लागू शकतो; तथापि, श्रोता फंक्शन एक मध्ये गुंडाळणे (तात्काळ इनव्होक्ड फंक्शन एक्सप्रेशन) प्रत्येक पुनरावृत्तीसाठी नवीन स्कोप तयार करून योग्य मूल्य कॅप्चर करण्यात मदत करते. चा उपयोग आणि for...of लूप्स पुढे क्लोजरमध्ये स्कोपिंगचे महत्त्व दर्शवितात, वापरून निर्देशांक आणि मूल्य कसे योग्यरित्या कॅप्चर करायचे ते दर्शविते प्रत्येक लूप पुनरावृत्तीसाठी वेगळे स्कोप तयार करण्यासाठी.

let funcs = [];
// Let's create 3 functions
for (let i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value:", i);
  };
}
for (let j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

१

var buttons = document.getElementsByTagName("button");
// Let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  (function(i) {
    buttons[i].addEventListener("click", function() {
      // each should log its value.
      console.log("My value:", i);
    });
  })(i);
}

const arr = [1, 2, 3];
const fns = [];
for (const i in arr) {
  fns.push(((i) => () => console.log("index:", i))(i));
}
for (const v of arr) {
  fns.push(((v) => () => console.log("value:", v))(v));
}
for (const n of arr) {
  const obj = { number: n };
  fns.push(((n, obj) => () => console.log("n:", n, "|", "obj:", JSON.stringify(obj)))(n, obj));
}
for (const f of fns) {
  f();
}

प्रगत JavaScript फंक्शन्समध्ये क्लोजरचा वापर एक्सप्लोर करणे

क्लोजर ही JavaScript मधील एक मूलभूत संकल्पना आहे जी फंक्शनला त्याच्या संलग्न स्कोपमधून व्हेरिएबल्समध्ये प्रवेश करू देते, तो स्कोप बंद झाल्यानंतरही. मेमोलायझेशन, करींग आणि फंक्शनल प्रोग्रामिंगमध्ये वापरलेली प्रगत कार्ये तयार करताना हे वैशिष्ट्य विशेषतः शक्तिशाली आहे. उदाहरणार्थ, महागड्या फंक्शन कॉलचे परिणाम लक्षात ठेवण्यासाठी मेमोलायझेशन क्लोजरचा फायदा घेते आणि जेव्हा तेच इनपुट पुन्हा येतात तेव्हा कॅशे केलेला निकाल परत येतो. क्लोजरचा वापर करून, आम्ही अधिक कार्यक्षम आणि ऑप्टिमाइझ केलेले कोड तयार करू शकतो जे कार्यप्रदर्शन वाढवते, विशेषत: फिबोनाची अनुक्रमांची गणना करणे यासारख्या पुनरावृत्ती कार्यांमध्ये.

क्लोजरचा आणखी एक प्रगत वापर म्हणजे JavaScript ऑब्जेक्ट्समध्ये खाजगी व्हेरिएबल्स आणि फंक्शन्स तयार करणे, खाजगी पद्धती आणि गुणधर्मांचे अनुकरण करणे. हे तंत्र बहुधा मॉड्यूल पॅटर्नमध्ये वापरले जाते आणि कार्यक्षमतेचा अंतर्भाव करण्यासाठी आणि जागतिक व्याप्तीचे प्रदूषण टाळण्यासाठी त्वरित फंक्शन एक्सप्रेशन (IIFE) लागू केले जाते. शिवाय, इव्हेंट हाताळणी आणि असिंक्रोनस प्रोग्रामिंगमध्ये क्लोजर महत्त्वपूर्ण भूमिका बजावतात, जिथे ते कालांतराने स्थिती आणि संदर्भ टिकवून ठेवण्यास मदत करतात. क्लोजर समजून घेणे आणि त्याचा प्रभावीपणे वापर केल्याने तुमची JavaScript प्रोग्रामिंग कौशल्ये लक्षणीयरीत्या वाढू शकतात आणि तुम्हाला अधिक मॉड्यूलर, पुन्हा वापरता येण्याजोगे आणि देखभाल करण्यायोग्य कोड लिहिण्यास सक्षम बनवू शकतात.

1. JavaScript मध्ये क्लोजर म्हणजे काय?
2. क्लोजर हे एक फंक्शन आहे जे त्याच्या लेक्सिकल स्कोपमध्ये प्रवेश राखून ठेवते, जरी फंक्शन त्या व्याप्तीच्या बाहेर कार्यान्वित केले जाते.
3. लूपमध्ये बंद का होतात?
4. लूपमध्ये क्लोजर होतात कारण लूप फंक्शन्स तयार करतो जे समान व्हेरिएबल संदर्भ घेतात, योग्यरित्या हाताळले नसल्यास अनपेक्षित वर्तन होते.
5. आम्ही लूपमध्ये बंद होण्याच्या समस्यांचे निराकरण कसे करू शकतो?
6. वापरत आहे ऐवजी loops मध्ये किंवा वापरून (तात्काळ इनव्होक्ड फंक्शन एक्स्प्रेशन्स) प्रत्येक पुनरावृत्तीसाठी नवीन स्कोप तयार करून क्लोजर समस्यांचे निराकरण करू शकते.
7. IIFE म्हणजे काय?
8. अ हे एक फंक्शन आहे जे तयार झाल्यानंतर लगेच कार्यान्वित केले जाते, बहुतेकदा नवीन स्कोप तयार करण्यासाठी आणि परिवर्तनीय संघर्ष टाळण्यासाठी वापरले जाते.
9. एसिंक्रोनस प्रोग्रामिंगमध्ये क्लोजर वापरले जाऊ शकतात?
10. होय, वचने आणि कॉलबॅक सारख्या एसिंक्रोनस ऑपरेशन्समध्ये स्थिती आणि संदर्भ राखण्यासाठी एसिंक्रोनस प्रोग्रामिंगमध्ये बंद करणे आवश्यक आहे.
11. मेमोलायझेशन म्हणजे काय आणि बंद केल्याने मदत कशी होते?
12. मेमोलायझेशन हे महागड्या फंक्शन कॉलचे परिणाम कॅश करण्यासाठी एक ऑप्टिमायझेशन तंत्र आहे. एकाधिक फंक्शन कॉलमध्ये कॅशेमध्ये प्रवेश राखून क्लोजर मदत करतात.
13. इव्हेंट हाताळण्यात क्लोजर कशी मदत करतात?
14. क्लोजर इव्हेंट हँडलर्सना आवश्यक व्हेरिएबल्सची स्थिती राखून ठेवतात, इव्हेंट ट्रिगर झाल्यावर ते योग्यरित्या कार्य करतात याची खात्री करतात.
15. JavaScript मध्ये मॉड्यूल पॅटर्न काय आहे?
16. मॉड्यूल पॅटर्न खाजगी व्हेरिएबल्स आणि फंक्शन्स तयार करण्यासाठी क्लोजरचा वापर करते, कार्यक्षमता समाविष्ट करते आणि जागतिक व्याप्ती प्रदूषण टाळते.
17. बंद करणे JavaScript मध्ये खाजगी पद्धतींचे अनुकरण करू शकते का?
18. होय, क्लोजर्स केवळ फंक्शनच्या व्याप्तीमध्ये जेथे ते परिभाषित केले आहेत तेथे व्हेरिएबल्स आणि फंक्शन्स ऍक्सेस करण्यायोग्य ठेवून खाजगी पद्धतींचे अनुकरण करू शकतात.

JavaScript मधील क्लोजर मास्टरिंग, विशेषतः लूपमध्ये, अंदाज लावता येण्याजोगा आणि कार्यक्षम कोड लिहिण्यासाठी महत्त्वपूर्ण आहे. फायदा करून , , आणि , विकासक सामान्य अडचणी टाळू शकतात आणि योग्य व्हेरिएबल स्कोपिंग सुनिश्चित करू शकतात. ही समज असिंक्रोनस कार्ये आणि इव्हेंट-चालित प्रोग्रामिंग हाताळण्याची क्षमता वाढवते, ज्यामुळे शेवटी अधिक मजबूत अनुप्रयोग बनतात.