Home > JavaScript > JavaScript Namespaces

JavaScript Namespaces

Imagine you are working in a multi-developer environment and there are so many JS developers working on the same project. The main issue from a programmer point of view is to maintain the uniquenes of the function names, the variables, objects,etc.

Consider the following situation in which developer A and B works on the same project. Developer A develops the following function:

function add(a,b){
	if(a && b){
		return a + b;
	}else{
		alert('The parameters needs to be checked');
	}
}

Developer B develops the following function:

function add(a,b,c,d){
	if(a && b && c && d){
		return a + b + c + d;
	}else{
		alert('The parameters needs to be checked');
	}
}

Now imagine that the order of the above mentioned function in the JavaScript file is like the way I’ve ordered, first A’s function after that B’s function. From some other point A tries to call his function with two parameters, what would be the result? Interestingly JavaScript will never show any error when have multiple versions of a function with the same name. But it is not as intelligent as C++ to support function overloading in this scenario. JavaScript will simply execute the last defined function, as a result of that the function developer A made will result in an error, it will say that there is some issue in the passed parameters. Life of a JavaScript developer would be a lot better if he can avoid these kind of issues.

What we need here is some mechanism using which we can minimize the name collision issues. Any one familiar with C++, C# will remember namespaces and especially if they are new in JavaScript development they’ll surely miss that feature too. Namespacing is nothing but compartmentalizing your code in more efficient manner in order to avoid the name collision issues.

Does JavaScript support namespacing? The answer is no. But we can do this namespacing mechanism using another feature of JavaScript – JavaScript object literals.

Lets jump into an example

We declare a empty JavaScript object in the following manner:

var globalObject = {};

or

var globalObject = new Object();

Now go back to our previous example in which A and B has developed two functions with the same name but with different functionality. Have a look at A’s function, which works on two numbers. Now assume that instead of creating that function directly in global namespace A decides to create it inside an object, the object denotes, it works on two numbers and he creates something like the following:

globalObject.twoNumbers = {};

After that he creates a function inside the newly created object:

globalObject.twoNumbers.add = function(a,b){
	if(a && b){
		return a + b;
	}else{
		alert('The parameters needs to be checked');
	}
};

Now it is B’s turn, check his function that works on four numbers. Like A he creates another object for his purpose in the global object:

globalObject.fourNumbers = {};

After that he creates a function inside the newly created object:

globalObject.fourNumbers.add = function(a,b,c,d){
	if(a && b && c && d){
		return a + b + c + d;
	}else{
		alert('The parameters needs to be checked');
	}
};

Now the developers who needs to invoke A’s function can call it like the following:

globalObject.twoNumbers.add(10,89);

Now the developers who needs to invoke A’s function can call it like the following:

globalObject.fourNumbers.add(13,841,6,98);

Achieving namespace effect in JavaScript is very simple the only requirement is to understand how the javascript object literal notation works.

Another example of the above mentioned item in a single step:

var globalObject = {
    twoNumbers: {
        add: function(a, b) {


            if (a && b) {
                return a + b;
            } else {
                alert('The parameters needs to be checked');
            }
        }
    },
    fourNumbers: {
        add: function(a, b, c, d) {
            if (a && b && c && d) {
                return a + b + c + d;
            } else {
                alert('The parameters needs to be checked');
            }
        }
    }
};
Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: