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

 

2 thoughts on “Define Classes for JavaScript Objects

  • October 25, 2017 at 9:28 am
    Permalink

    There is a typo in the 5th code box

    this.ame = name;

    Reply
    • October 25, 2017 at 9:38 am
      Permalink

      Hello Vasilis, Thanks for pointing it out, I have fixed it 🙂

      Reply

Leave a Reply to Virendra Rathore Cancel reply

Your email address will not be published. Required fields are marked *