Object Oriented JavaScript

For a long time, JavaScript has served as an event based scripting language and often its object oriented capabilities get left out (or ignored when using it as a client side scripting language). In this blog we are going to see the OOP aspect of JavaScript. Obviously you are expected to have some basic understanding of dealing with instantiating an object and calling its methods and properties, scope of variables, etc.

Class

This is probably the simplest section of this entire blog because defining a Class is as simple as defining a function. In other words, a function can be instantiated using the well-known new operator. Below is an example of a JavaScript Class called Person which is instantiated as object johndoe.

function Person() {
// ... later
}

var johndoe = new Person();

Attributes & Method

Let’s build upon our class Person here.

function Person() {

this.age;
this.gender;
this.setAge = function(a) { // set age
this.age = a;
}
this.setGender = function(g) { // set gender
this.gender = g;
}

}

var johndoe = new Person();
johndoe.setAge(35);
johndoe.setGender("Male");

In this example, Person has 2 attributes, namely – age & gender. The this operator is not new here as in any other OOP language. It signifies that the instantiated object retains the scope of these attributes and methods.

Further, johndoe also contains methods, namely – setAge() & setGender().

Finally, we are setting the age and gender for our object johndoe using the methods setAge() & setGender().

Object

You have already seen above how we created an object by instantiating a function with the new operator. So there is nothing much to talk about an Object now, you’d think!. But this is where I intend to spend some time to clarify how JavaScript thinks of Objects.

Defining a Class with its attributes and methods that are instantiated for each object is kind-a an obvious nature of OOP and which is very valid when developing an OO application. However, the concept of an Object is slightly extended in JavaScript. Let’s look at some examples:


/* 1.*/ var box = {id:'BX109', width:10, height:5, length:15};
/* 2.*/ var boxIDs = ['BX109', 'BX112', 'BX124'];
var Box = function(id) {
this.id = id;
this.width = 0; this.height = 0; this.length = 0;
this.setDims = function(w,h,l) {
this.width = w; this.height = h; this.length = l;
}
};
/* 3.*/ var bx109 = new Box('BX109').setDims(10,5,15);

Each of the lines labelled 1, 2 and 3 above are objects. Yes, even an array is an object!. We can validate that with the typeof statement. Let’s see below:


typeof box; // object
typeof boxIDs; // object
typeof bx109; // object

Now, although all the 3 case are objects, only object bx109 contains attributes and methods. (Remember, we are ignoring Box in our discussion at this point only because it is a Class, or in real JavaScript technical terms, a function. Try the typeof yourself!).

Another interesting point to note here is among the 3 objects, only boxIDs has length. It’s so because an Array is an object with multiple elements, which themselves can be an object. See an example? Here you go:


var boxes = [
{id:'BX109', width:10, height:5, length:15}, // element 1: typeof => object
{id:'BX112', width:15, height:10, length:25}, // element 2: typeof => object
{id:'BX124', width:20, height:15, length:40} // element 3: typeof => object
]; // array: typeof => object, with length => 3

As you can see, boxes contains multiple objects (3 to be precise) and referencing each element will yield an object.
Example:
boxes[1].id will yield BX112. (Notice the ‘dot’ notation!)

Conclusion

The point of this article is that because:

  • JavaScript treats complex declarations within brace brackets {}, as objects (a.k.a. JSON)
  • allows us to store an array of objects as an object itself, while
  • allowing to instantiate function declaration (declared as classes with attributes and methods)

developing large complex applications becomes fairly easy. I am not comparing it with other powerful OOP languages but just highlighting the OO concept in JavaScript.


Please feel free to comment, provide feedback or add if anything obvious was missed or any additional perspective needs to be covered.