Create custom namespace in JavaScript

This JavaScript tutorial, we will discuss how to create a custom namespace in JavaScript.

In Web technology, JavaScript is playing a huge role in 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 namespaces in JavaScript”.

Custom namespace in JavaScript

In JavaScript, by default, all the code will be loaded and tossed into a single bucket called Global Namespace. All the variables, functions from any library referenced by any page or user custom code added on any page will be pushed into this bucket.

If you load lot namespaces and variables in user code and run into the conflict in variables/namespace the behavior will change.

For example, see the below Global NameSpace bucket with all variables and namespaces:

custom namespace in JavaScript

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

Especially in the SharePoint world, we started using javascript 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 end up with conflicts. However, jQuery has noconflict mode jQuery.noConflict to avoid this problem of naming conflict.

As most of us know the 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 the event, etc. If we don’t follow the best practice and implement it on that page we will end up 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 the 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 namespaces will get its own containers to avoid conflicts with other objects.

Create custom Namespace in JavaScript

Luckily creating custom namespaces 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

Create custom namespace 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 into conflicts.

Sample code example with a custom namespace in JavaScript.

<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>

You may like following JavaScript tutorials:

This JavaScript tutorial explains, how to create a custom namespace in JavaScript.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 13+ 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

>