Define Classes for JavaScript Objects

Classes and objects in JavaScript

How do we define class in JavaScript well, there’s a lot of patterns available using function, factory etc. But I will try to show you the best path. Let me create a class for employees . Each employee attributes are name and age. We will also add a method called “getInfo” just to print those attributes.

In the first method we are going to create a function. Then we will add some properties and methods into it.

function Employee (name, age) {
     var name = name;
     var age = age;
     this.getInfo = function () {
     console.log("Employee " +name + " is "+ age + " years old" );
     }
}

So with this bare minimum of code I have created a class Employee. Now I will create an object of employee class.

     var emp = new Employee(“Peter”, 27);

I have initialized the object with two parametric constructor passing name and age. Those two properties get assigned to object emp along with the method.  Some of experience JavaScript developers will notice that I have not used this to refer the current object.

I did it purposely to make you aware that I want private variable for this class. In the next example I will clear this point.   Now I can make call to get info to print employee information.

emp.getInfo();// to print object attributes

This call will print employee information on console like this “Peter is 27 years old”.  Let’s make it interesting and put emp inside dir function of console like this.

console.dir(emp); // to check object structure

Now you will notice each object of employee class have this function attached to it which is not so efficient. If we create thousand object of employee class then we will have thousand copy of getInfo method. This would be so redundant.  Now we will pull getInfo() out of the employee class something like this.

function Employee (name, age) {
     this.name = name;
     this.age = age;
}
Employee.prototype.getInfo = function () {
     console.log("Employee " +this.name + " is "+ this.age + " years old" );
}

We will create the object of Employee class same way like we did before. Keep in mind now each object has a reference to getInfo method rather than having the actual copy.

var emp = new Employee(“Peter”, 27);
emp.getInfo();// to print object attributes
console.dir(emp); // to check object structure

In the second method we will use the factory pattern

In this pattern we create a function who returns an object as we already know that functions are objects too in JavaScript. I don’t consider this pattern to be efficient but for the sake of completeness I am covering it.

So this how we create class with factory pattern.

function Employee (name, age) {
    return {
    name:name,
    age:age,
    getInfo: function () {
    console.log("Employee " +name + " is "+ age + " years old" );
    }
   }
}

We will create the object of Employee class same way like we did before. Now I can make call to get info to print employee information.

emp.getInfo();// to print object attributes

This call will print employee information on console like this “Peter is 27 years old”.  Let’s make it interesting and put emp inside dir function of console like this.

console.dir(emp); // to check object structure