Namespaces 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 discuss how to use namespaces to avoid polluting the global scope. This is continuation to Part 55. Please watch Part 55 of JavaScript tutorial to understand the problem of global namespace pollution.

JavaScript lack namespaces. However we can use objects to create namespaces.

The following line says use the PragimTech object if it already exists, otherwise create an empty object.
var PragimTech = PragimTech || {};

The following line adds a nested namespace. A nested namespace is a namespace inside another namespace. In JavaScript to define a nested namespace, you define an object inside another object.
PragimTech.TeamA = PragimTech.TeamA || {};

Modify the script in TeamA.js file as shown below. In this example we are adding customer() function to PragimTech.TeamA namespace.

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

PragimTech.TeamA.customer = function (firstName, lastName)
{

{
}

return this;
}

PragimTech will be added to the global namespace. window is the alias for global namespace in JavaScript. You can now access customer() function as shown below.

PragimTech.TeamA.customer("Tom", "Grover")

OR

window.PragimTech.TeamA.customer("Tom", "Grover")

Modify the script in TeamB.js file as shown below. In this example we are adding customer() function to PragimTech.TeamB namespace.

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

PragimTech.TeamB.customer = function (firstName, middleName, lastName)
{

{
}

return this;
}

PragimTech will be added to the global namespace. You can now access customer() function as shown below.

PragimTech.TeamB.customer("Tom", "T", "Grover")

OR

window.PragimTech.TeamB.customer("Tom", "T", "Grover")

On any given HTML page you should be able to access both the versions of customer() function as shown below.

[html]
[head]
[script type="text/javascript" src="TeamA.js" ][/script]
[script type="text/javascript" src="TeamB.js" ][/script]
[/head]
[body]
[script type="text/javascript"]
// Call the customer function that is defined in TeamA.js
alert(PragimTech.TeamA.customer("Tom", "Grover").getFullName());

// Call the customer function that is defined in TeamB.js
alert(PragimTech.TeamB.customer("Tom", "T", "Grover").getFullName());
[/script]
[/body]
[/html]

[shivayogaji]

Thank you so much ! I don't understand my teacher at school, then i watch your tutorials and all is clear and understood !

[sameers]

Thanks the video. With this 8 minute video I came up the speed on JavaScript Namespaces.

[braScene]

Great explanation, and this is very useful in practice, thanks!

[PiyushSrivastavasri]

Really liking your videos. Giving answers to most of my questions.

[ramchandrathakkar]

Never know that. Very good understanding and very useful

[rsardak]

could you explain the "return" statment for this case in details?

[conaxliu]

I find that if the customer function is declared at the global namespace then it doesn't require 'return this'. If the customer function is declared in an object then it requires 'return this', otherwise the functions and properties within it are not accessible. But I don't know why.

[mahmoudelkout]

i found no reason to use (return this) because i can still access the properties and method without using it

[AbbasBengali]

when does PragimTech namespace become empty?any scenario?
Also i did not understand why return this is used

[nayeemmohammad]

Actually why are we creating name-space it is simple to create another function with different name as we know that javascript does not support method over loading. Do we have any other advantage with name-space rather than this.

[Wandering_Abhi]

please provide list of videos till part 52.