Namespaces in JavaScript

Namespaces are used to help organize code into logical groups. An example of a namespace is MyCo.ERP.Customers, which may contain code regarding ERP Customers. I could also have a namespace called MyCo.CRM.Customers. When writing an app, I can reference each piece of code using their fully qualified name to avoid confusion of what methods I would like to run. In languages like C#, namespaces are easily implemented.

In JavaScript, we can create namespaces by using objects. Let’s say we wanted to create a Customer namespace. We can do this through the code:

var MyCo = MyCo || {};

What this does, is create the Customer object if it does not exist.

You can also create a nested namespace. As above, we can create a namespace such as

var MyCo = MyCo || {};
MyCo.ERP = MyCo.ERP || {};

So let’s say in JavaScript you had 2 functions called Customer with the same name in different JavaScript files. If there is no namespacing, then both these files are part of the global namespace by default. So you can only call one Customer method at any time.

In a previous example, we had a customer function:

function Customer (firstname, lastname, email, phonenumber) {
    this.firstname = firstname;
    this.lastname = lastname;
	this.email = email;
	this.phonenumber = phonenumber;
	
    this.GetCustomer = function() {
        return this.firstname + ' ' + this.lastname + ' ' + this.email + ' ' + this.phonenumber;
    };
}

We can add our namespace objects to the script and write and call the function as below:

var MyCo = MyCo || {};
MyCo.ERP = MyCo.ERP || {};

MyCo.ERP.Customer = function (firstname, lastname, email, phonenumber) {
    this.firstname = firstname;
    this.lastname = lastname;
	this.email = email;
	this.phonenumber = phonenumber;
	
    this.GetCustomer = function() {
        return 'ERP:' + this.firstname + ' ' + this.lastname + ' ' + this.email + ' ' + this.phonenumber;
    };
}

var MyCo = MyCo || {};
MyCo.CRM = MyCo.CRM || {};

MyCo.CRM.Customer = function(firstname, lastname, email, phonenumber) {
    this.firstname = firstname;
    this.lastname = lastname;
	this.email = email;
	this.phonenumber = phonenumber;
	
    this.GetCustomer = function() {
        return 'CRM:' + this.firstname + ' ' + this.lastname + ' ' + this.email + ' ' + this.phonenumber;
    };
}

// Create objects
var Customer00001 = new MyCo.ERP.Customer("Bob", "Smith", "bsmith@test.com", "555-111-2222");
var Customer00002 = new MyCo.CRM.Customer("James", "Johnson", "jjohnson@test.com", "555-111-3333");

alert(Customer00001.GetCustomer());
alert(Customer00002.GetCustomer());

This will display 2 alerts for each namespace customer:

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube

Facebook

Twitter

Linkedin