ग्लोबल नेमस्पेस पॉल्यूशन (Global Namespace Pollution)
ग्लोबल नेमस्पेस को पॉल्यूट करने से नाम टकराव (name collision) होता है। यह नाम टकराव बड़े प्रोजेक्ट्स में बहुत आम है जहां हम कई JavaScript लाइब्रेरीज का उपयोग कर रहे हों। आइए विस्तार से चर्चा करें कि नाम टकराव क्या है।
आइए एक परिदृश्य लें जिसमें A1 और A2 नाम की 2 टीमें एक प्रोजेक्ट पर काम कर रही हैं। उन दोनों ने अपनी-अपनी JavaScript फाइलें तैयार की हैं: TeamA1.js और TeamA2.js जैसा कि नीचे दिखाया गया है।
TeamA1.js
TeamA1 ने 2 पैरामीटर्स fname और lname (firstname & lastname) के साथ एक student फंक्शन बनाया है।
function student(fname, lname) {
this.fname = fname;
this.lname = lname;
this.getFullName = function() {
return this.fname + " " + this.lname;
};
}
TeamA2.js
TeamA2 ने उसी नाम (student) की फंक्शन बनाई है लेकिन 3 पैरामीटर्स fname, mname, lname के साथ।
function student(fname, mname, lname) {
this.fname = fname;
this.mname = mname;
this.lname = lname;
this.getFullName = function() {
return this.fname + " " + this.mname + " " + this.lname;
};
}
HTML फाइल
अब ऊपर की JS फाइलों को चलाने के लिए एक HTML फाइल बनाएं। JS फाइलों को <head> टैग में रखें:
<html>
<head>
<script type="text/javascript" src="TeamA1.js"></script>
<script type="text/javascript" src="TeamA2.js"></script>
</head>
<body>
<div id="resultDiv"></div>
<script>
document.getElementById("resultDiv").innerHTML =
new student("रजेंद्र", "प्रसाद").getFullName();
</script>
</body>
</html>
आउटपुट
रजेंद्र प्रसाद undefined
व्याख्या
यहां हमारे पास दो student फंक्शन्स हैं - एक 2 पैरामीटर्स के साथ और दूसरा 3 पैरामीटर्स के साथ। हमारा उद्देश्य 2 पैरामीटर्स वाले student फंक्शन का उपयोग करना है, इसलिए HTML फाइल में केवल दो पैरामीटर्स ("रजेंद्र", "प्रसाद") पास किए गए हैं। लेकिन हमें जो आउटपुट मिला वह है "रजेंद्र प्रसाद undefined", जिसका अर्थ है कि कोड ने 3 पैरामीटर्स वाले फंक्शन को लिया बजाय 2 पैरामीटर्स वाले के।
इसका कारण है कि JavaScript **फंक्शन ओवरलोडिंग** को प्रोत्साहित नहीं करता। यह बस उसी नाम के दूसरे फंक्शन से फंक्शन को **ओवरराइड** कर देता है (यहां नाम student है)। हमारे उदाहरण में चूंकि 3 पैरामीटर्स वाला फंक्शन (TeamA2.js) 2 पैरामीटर्स वाले फंक्शन (TeamA1.js) के बाद रखा गया है, TeamA2 फंक्शन ने TeamA1 फंक्शन को ओवरराइड कर दिया, जिससे आउटपुट में undefined प्रदर्शित हुआ। यदि दोनों JS फाइलों के स्थान उलट दिए जाएं तो आउटपुट "रजेंद्र प्रसाद" होगा।
यहां हम कह सकते हैं कि नाम टकराव हुआ है। दोनों टीमों ने उसी नाम से फंक्शन बनाया है जो student है। इसलिए ग्लोबल नेमस्पेस में सब कुछ न जोड़ना बहुत महत्वपूर्ण है। यदि कोई और वही वेरिएबल या फंक्शन नाम उपयोग करता है, तो यह नाम टकराव का कारण बन सकता है।
रोकथाम के उपाय
- IIFE (Immediately Invoked Function Expression) - स्कोप अलग करें
- मॉड्यूल्स (ES6+) -
import/exportउपयोग करें - नेमस्पेस पैटर्न -
var MyApp = MyApp || {} - क्लोजर्स - प्राइवेट स्टेट कैप्सुलेट करें
- बंडलर्स - Webpack, Rollup, Vite स्वचालित रूप से स्कोप अलग करते हैं
