Creating custom namespace in JavaScript

javascript namespace best practice

In Web technology JavaScript is playing a huge role with new and high functionalities. In this article I would like to add light on your JavaScript skills by adding a new feather to your hat called “Creating Custom name spaces in JavaScript”.

Why we need custom name spaces in JavaScript?

In JavaScript by default all the code will be loaded and tossed in to a single bucket called Global Namespace. All the variables, functions from any library referenced by any page or user custom code added in any page will be pushed in to this bucket. If you load lot name spaces and variables in user code and run in to conflict in variables / name spaces the behavior will change.

For example see the below Global NameSpace bucket with all variables and name spaces:

javascript namespace best practice
javascript namespace best practice

If you see we got a conflict in “CompanyName” variable which is common way of using it and most of the developers use it.

Especially in SharePoint world we started using java script widely from SharePoint 2010 onwards. As we all know we started using some of the libraries with $ sign and jQuery variables also start with $ sign. This will again cause code conflict and with end up with conflicts. However jQuery has noconflict mode jQuery.noConflict to avoid this problem of naming conflict.



As most of us know that in SharePoint 2013 team site homepage is using more than 3000 items. In this most common ones are refresh page, toggle all items and cancel event etc. If we don’t follow the best practice and implement in that page we will endup this conflict of this.
When conflict occurs JavaScript handles it in a very specific, very predictable, but perhaps unfortunate manner. The last item defined with a certain name wins. It overwrites or replaces the previous item same name and its value which intern ends with unpredictable and unknown errors. Unfortunately it is very difficult to track.

To avoid this conflict in JavaScript we should use Global Namespaces that are uniquely named. The custom name spaces will get its own containers to avoid conflicts with other objects.

Syntax for creating custom Namespace:

Luckily creating custom name spaces in JavaScript is very easy. The syntax is as follows:
var COSTCO = COSTCO || {};
var COSTCO.ShoppingCart = COSTCO.ShoppingCart || {};
var COSTCO.Users = COSTCO.Users || {};
COSTCO.ShoppingCart.CityName = “New York”;
COSTCO.Users.CityName = “Los Angeles”;




Example:
GLOBAL NameSpace

Creating custom namespaces in JavaScript
Creating custom namespaces in JavaScript

If you see in the above example CityName is common in both COSTCO.ShoppingCart and COSTCO.Users but it will not override the city name or it will not get in to conflicts.

Sample code example with custom name spaces:


<script type=”text/javascript”>
“use strict”;
function buttonClick()
{
var COSTCO = COSTCO || {};
COSTCO.ShoppingCart = COSTCO.ShoppingCart || {};
COSTCO.Users = COSTCO.Users || {};
COSTCO.ShoppingCart.CityName = “New York”;
COSTCO.Users.CityName = “Los Angeles”;
alert(COSTCO.ShoppingCart.CityName);
alert(COSTCO.Users.CityName);
}
</script>

Hope this helps  !!!!


You May Also like the Following SharePoint Online Tutorials:

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 12 years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

View all posts by Krishna Vandanapu →