Global namespace pollution in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will understand the problem of global namespace pollution in JavaScript with an example. When working with JavaScript on a big project, you might hear senior developers saying during the code review, this code pollutes the global scope. In this video let's understand the problem of global namespace pollution. In our next video we will discuss how to write JavaScript in such a way that it does not pollute the global scope.

Let us say we have 2 software development teams (TeamA & TeamB) working on a large project for Pragim Technologies.

TeamA has created a customer constructor function with 2 parameters (firstName & lastName) and added it to TeamA.js file
function customer (firstName, lastName)
{
{
}
}

TeamB has also created a customer constructor function but with 3 parameters (firstName, middleName & lastName) and added it TeamB.js file.
function customer (firstName, middleName, lastName)
{

{
}
}

So at the moment we have 2 customer constructor functions. One version has 2 parameters (firstName & lastName) and the other version has 3 parameters (firstName, middleName & lastName).

HTML Page code : In this HTML page we want to use the customer constructor function that has 2 parameters (firstName & lastName). Notice that in the header section we are first loading TeamA.js and then TeamB.js.
[html]
[head]
[script type="text/javascript" src="TeamA.js" ][/script]
[script type="text/javascript" src="TeamB.js" ][/script]
[/head]
[body]
[div id="resultDiv"][/div]
[script type="text/javascript"]
[/script]
[/body]
[/html]

When you view the page in the browser, we get the following output. We expected it to print to "Tom Grover"
Tom Grover undefined

This is because JavaScript does not support function overloading and as a result, the customer() constructor function with 3 parameters simply overwrites the customer() constructor function with 2 parameters.

You may be wondering why didn't it happen the other way round. Why didn't customer() constructor function with 2 parameters overwrite the customer() constructor function with 3 parameters. That is because TeamB.js is loaded after TeamA.js. So the customer() constructor function in TeamB.js has overwritten the customer() constructor function in TeamA.js.

The reason, one of the customer() constructor function got overwritten is because we have already polluted the global scope. Let's understand what we mean by this.

1. window is the Global object in JavaScript

2. When TeamA.js script file is loaded, the customer() function in TeamA.js file is added to the global namespace

3. When TeamB.js script file is loaded, the customer() function in TeamB.js file is added to the global namespace. Since 2 functions with the same name cannot exist in the global namespce, the customer() function in TeamB.js overwrites the customer() function in TeamA.js. As a result we cannot use the customer() function in TeamA.js file.

4. In JavaScript if you declare a variable or a function second time, it simply overwrites the one you created earlier. JavaScript does not raise any errors like C# or Java if you redefine a variable or a function.

Here is the summary.
Polluting global namespace causes name collision. This is especially true in large projects where you may be using several JavaScript libraries (both internally developed as well as third party libraries). That's why it is very important not to add everything to the global namespace. If someone else use the same variable or function names it can lead to name collision.

In our next we will discuss, how to write JavaScript code in such a way that it does not pollute the global scope.

[dompolblanka]

This entire series is brilliant. Thank you for taking the time to put this together.

[ckumareddy]

Hi Venkat Garu,

Requesting you please do the series on DESIGN PATTERNS, want to learn from you, because it will be so simple and easy when you teach the subject.

Thanks in advance. 

[vladanng]

Why is that :) Very common word from you :) Your tutorials are the best, no doubt, best on youtube for sure!

[AxLAxL]

I hope you can make angular.js and ko.js. BTW thanks for your videos I just passed my technical exam last week.

:)

[GracjanZWR]

Hej, Bro nice tutorial but I think that the Constructor function should to start with the capital letter ;)

[belkassem]

Thanks Sir
I think time and so many tutorials are getting rid of your voice :lol