JavaScript में लूप में क्लोज़र को अपने इटरेशन के वेरिएबल का मान कैसे याद रखवाएं?

सभी को नमस्कार! मैं JavaScript में नया हूँ और एक समस्या का सामना कर रहा हूँ जिसे मैं बिल्कुल नहीं समझ पा रहा हूँ। मैं एक सरल कोड लिख रहा हूँ: मैं कई बटनों पर क्लिक हैंडलर जोड़ना चाहता हूँ, ताकि प्रत्येक अपना नंबर दिखाए। यह मेरा कोड है: ```javascript const buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { console.log('बटन नंबर ' + i); }); } ``` लेकिन जब मैं किसी भी बटन पर क्लिक करता हूँ, तो कंसोल में हमेशा "बटन नंबर 5" (i का अंतिम मान) दिखता है, चाहे मैंने किसी भी बटन पर क्लिक किया हो। मैंने पढ़ा है कि यह क्लोज़र से संबंधित है, लेकिन मुझे समझ नहीं आ रहा कि इसे कैसे ठीक करूँ। ऐसा क्यों होता है? मैं कैसे सुनिश्चित करूँ कि प्रत्येक बटन अपना नंबर याद रखे? कृपया सरल शब्दों में उदाहरणों के साथ समझाएँ। पहले से धन्यवाद! <<>>

समस्या क्यों होती है?

समस्या इसलिए होती है क्योंकि var से घोषित वेरिएबल की स्कोप फंक्शन-लेवल होती है, और क्लोज़र लूप के सभी इटरेशन में एक ही वेरिएबल i को रेफर करते हैं। जब लूप खत्म होता है, i का मान 5 होता है, और सभी क्लिक हैंडलर उसी मान को दिखाते हैं।