Global NameSpace Pollution In JavaScript and How to Overcome 2020 -Sagar Jaybhay

4 min readFeb 5, 2020

In this article we will understand what is Global Namespace Pollution is in JavaScript and How to overcome this problem in javascript.

Global NameSpace Pollution In JavaScript

In object-oriented programming languages like Java, C# we have the concept of function or method overloading. In which we can have the same method name but parameters are different. So such kind of code is work in that programming languages without any issue see below code

using System; 
class abc { 
  
    // adding two integer values. 
    public int Add(int a, int b) 
    { 
        int sum = a + b; 
        return sum; 
    } 
  
    // adding three integer values. 
    public int Add(int a, int b, int c) 
    { 
        int sum = a + b + c; 
        return sum; 
    } 
  
    // Main Method 
    public static void Main(String[] args) 
    { 
  
        // Creating Object 
        abc ob = new abc (); 
  
        int sum1 = ob.Add(1, 2); 
        Console.WriteLine("sum of the two "
                          + "integer value : " + sum1); 
  
        int sum2 = ob.Add(1, 2, 3); 
        Console.WriteLine("sum of the three "
                          + "integer value : " + sum2); 
    } 
}

In the above code, we have added a method that takes 2 and 3 parameters respectively which works perfectly fine.

In our Javascript case suppose we are developing enterprise-level application and so many developers are working on this for understanding well we take 2 developers sagar jaybhay and second is Ramesh.

Sagar Jaybhay develops a file customerInfo.js and Ramesh develops a file whose name is custinfo.js see below code in which we refer these 2 files in our index HTML file.

CustomerInfo.js

function CustomerInfo(firstname,lastname){

    this.FirstName=firstname;
    this.LastName=lastname;

    this.getFullName=function(){
        return this.FirstName+" "+this.LastName;
    }
}

CustInfo.js

function CustomerInfo(firstname,middleName,lastname){

    this.FirstName=firstname;
    this.LastName=lastname;
    this.MiddleName=middleName;
    this.getFullName=function(){
        return this.FirstName+" "+ this.MiddleName+" " +this.LastName;
    }
}

See above 2 files which contain function having the same name but parameter count is different one contain 2 parameter and other contain 3.

When you add these javascript files to HTML page the functions are added in the global namespace and in our javascript case global namespace is window object and as our function names are same so only last added file function is added and previously added function gets overridden so in our case 3 parameter function is present. See below image

And when you call this from HTML for HTML code is below given

<!DOCTYPE html>
<head>

<title>
    JavaScript Object Oriented    
</title>
<script src="CustomerInfo.js"></script>
<script src="custinfo.js"></script>
</head>

<body>

<h1>
    JavaScript Object Oriented
</h1>

<div id="display"></div>
<div>
    <script>
        document.getElementById("display").innerHTML=new CustomerInfo("Sagar","Jaybhay").getFullName();
        </script>
</div>

<!-- <script src="minify.js"></script> -->

</body>

</html>

Polluting global namespace causes a name collision. It is especially true for large projects where we use several libraries and third-party libraries as well. So that’s why it is very important that not to add everything in the global namespace.

How to overcome global namespace pollution?

Javascript lacks namespaces. But we can use the namespace to create objects below is the code for creating objects for namespace

var SagarJaybhay=SagarJaybhay || {};

You can also create nested namespace which means namespace within a namespace. In javascript, you can place an object inside other objects

var SagarJaybhay=SagarJaybhay || {}; SagarJaybhay.TeamA=SagarJaybhay.TeamA || {};

So the meaning of the below line is

var SagarJaybhay=SagarJaybhay || {};

If the SagarJaybhay object exists use that object else create a new object.

Code of Js file is below

Index.html

<!DOCTYPE html>
<head>

<title>
    JavaScript Object Oriented    
</title>
<script src="CustomerInfo.js"></script>
<script src="custinfo.js"></script>
</head>

<body>

<h1>
    JavaScript Object Oriented
</h1>

<div id="display"></div>
<br/>
<div id="display2"></div>
<div>
    <script>
        document.getElementById("display").innerHTML=window.SagarJaybhay.TeamA.CustomerInfo("Sagar","Jaybhay").getFullName();
        document.getElementById("display2").innerHTML=window.SagarJaybhay.TeamB.CustomerInfo("Sagar","S","Jaybhay").getFullName();
        </script>
</div>

<!-- <script src="minify.js"></script> -->

</body>

</html>

CustomerInfo.js

var SagarJaybhay=SagarJaybhay || {};
SagarJaybhay.TeamA=SagarJaybhay.TeamA || {};

SagarJaybhay.TeamA.CustomerInfo=function (firstname,lastname){

    this.FirstName=firstname;
    this.LastName=lastname;

    this.getFullName=function(){
        return this.FirstName+" "+this.LastName;
    }
    return this;
}

CustInfo.js

var SagarJaybhay=SagarJaybhay || {};
SagarJaybhay.TeamB=SagarJaybhay.TeamB || {};


SagarJaybhay.TeamB.CustomerInfo=function(firstname,middleName,lastname){

    this.FirstName=firstname;
    this.LastName=lastname;
    this.MiddleName=middleName;
    this.getFullName=function(){
        return this.FirstName+" "+ this.MiddleName+" " +this.LastName;
    }
    return this;
}

When rewrite the function remember to return this object.

GitHub :- https://github.com/Sagar-Jaybhay

Originally published at https://sagarjaybhay.net on February 5, 2020.

Global NameSpace Pollution In JavaScript and How to Overcome 2020 -Sagar Jaybhay

Global NameSpace Pollution In JavaScript

How to overcome global namespace pollution?

Written by SAGAR JAYBHAY