JavaScript Global Object, Namespaces and Object constructors

Global Object

Global Object is an object that created once the application is running. We can’t recreate it or affect his creation in any way. After a creation Global Object uses as a global scope of the application. Actually, in JavaScript we haven’t global variables and functions. All variables and functions that defined globally become properties of the Global Object. So, all variables in JavaScript are placed under Global Object. ECMA-262 does not indicate a way to access the Global object directly, but we can implement the access to him by using this.

The example below shows you how to do it:

var globalObject = (function(){
 return this;
})();

Check it on jsFiddle

In web applications the browser implementation of ECMA-262 has an object called window that uses as a delegate to a Global Object, so all the way we can access him very simply:

var globalObject = window;

In above examples we created variables that hold a reference to Global Object. As discussed previously, all global variables become a properties of Global Object, so we simply created properties on Global Object that reference to himself.

Because all new variables and functions are placed under Global Object, there is a very high chance of names collision. As we know, JavaScript is loosely typed language and as such he is not preserving a type for created variables. So, all variables can overhead other variables just by using same name. This is a names collision that we talked before.

To prevent a name collision we can use a number of techniques such as using namespaces, using modules and more.

Namespaces

Namespaces are objects that created under Global Object and hold variables and functions. Think about it like a tree. Tree has a root (Global object) and branches. Every branch is a new namespace.

To implement it in JavaScript we use next code:

var myNamespace = myNamespace || {};

Left side of the example above simply declares a variable for our namespace. Right side a little bit more complicated. First of all we try to get a namespace with same name, if declared somewhere in application. This technique prevents recreation of same namespace and not allow us to overhead his logic. Another pro of this technique is that we can use same namespace in several files. Anyway, if a namespace was not declared before in application, we simply assign the variable with empty object and thereby create new namespace.

Object constructors

As we know in JavaScript we can create a new object in two ways. First way is to use the new keyword:

var rectangle = new Object();
rectangle.a = 10;
rectangle.b = 5;
rectangle.getPerimeter = function() {
 return 2*(this.a + this.b);
}

Second way is to use object literal that is commonly used way. The big pro of this way is that you can encapsulate a creation of an object. The previous example can be rewritten as follows:

var rectangle = {
 a: 10,
 b: 5,
 getPerimeter: function() {
 return 2*(this.a + this.b);
 }
}

Two ways above show us how to create a simple JavaScript object. It’s fine, but what if I want to create number of rectangles in my application? Do I need to duplicate that code for every rectangle instance? The answer, of course, is no. We can use a constructors. Two previous examples can be rewritten with constructor as follows:

function Rectangle(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2*(this.a + this.b);
 };
}
var rectangle = new Rectangle(10,5);

Constructors in ECMAScript are used to create specific types of objects. Constructors provide us with ability to create new object instances in simple way. More of that, every instance that created with constructor can be identified which type is he.

function Rectangle(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2*(this.a + this.b);
 };
}
var rectangle = new Rectangle(10,5);
alert(rectangle.constructor == Rectangle); // alerts true
alert(rectangle instanceof Rectangle); //alerts true

Try it in jsFiddle

The example above shows that we can identify type of the object in two ways. By checking his constructor property and by using instanceof operator. During object creation the constructor property is automatically assigned with a reference to constructor function. But the constructor is not placed on the object itself. It’s placed on a prototype of the object. We can check object prototype by inspecting an object by Dev Tools or by accessing a __proto__ property of an object in Chrome, Safary and Firefox.

So until now we can understand 3 important things:

1. All variables and functions are placed on Global Object
2. To prevent name collision we can use a namespaces
3. We need to use a constructors to create specific types of objects

But when we look at constructors we can understand that it is just regular JavaScript function and as such, when placed on global scope, can be easily overwritten by another function with same name. So we will want to place it under namespace as well. It can look like follows:

var namespace = namespace || {};
namespace.Rectangle = function(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2*(this.a + this.b);
 };
}
var rectangle = new namespace.Rectangle(10,5);

It’s good, but when we will expect a constructor of rectangle, we will see that there is anonymous function so the prototype will be of regular Object type.

What we want, is to be able with a namespace to look at prototype and to identify that this object is instance of Rectangle. I still can use instanceof operator and it’s smart enough to say me that is a Rectangle, but as a developer I will like to see it in my DevTools as well and to know that object prototype is Rectangle. To achieve that, we can use a next trick:

var namespace = namespace || {};
namespace.Rectangle = function <strong>Rectangle</strong>(a, b) {
 this.a = a;
 this.b = b;
 this.getPerimeter = function() {
 return 2*(this.a + this.b);
 };
}
var rectangle = new namespace.Rectangle(10,5);

What I did is simply give name to a constructor function. Now we can see that our object constructor is under namespace and we still can see that object prototype is Rectangle:

Using this way take care of IE <= 8.

Thanks