Javascript Constructors- Why it should be used- Object Oriented Programming in Javascript

Javascript Constructors- Why it should be used- Object Oriented Programming in Javascript

Mark my words! Javascript is an object oriented programming language, i.e you can create objects to solve your programming problems. In object oriented approach, you create objects that represent things in the system and you add logic for objects to behave, and then objects interact with one another to solve your problems. It’s giving life to things (relevant to your program) then those things behave as you want (as programmed) and achieve you result. This design has been very useful in cracking various problems.

Let’s take an example to understand the birth of constructors in Javascript. Suppose, you are asked to create an object of employee and it should have 4 properties firstName, lastName, gender , and designation. Well! you said no problem.

var employee1={};
employee1.firstName="Anoop";
employee1.lastName="Rai";
employee1.gender="M";
employee1.designation="Software Engineer";

Above is the simplest way, first you created empty object and then you associated all the 4 properties to the object (of course, you could have also created the same via inline). What if you are asked again to create another employee object with the same properties.

var employee2={};
employee1.firstName="Ram";
employee1.lastName="Kumar";
employee1.gender="M";
employee1.designation="Associate Software Engineer";

Seems no problem at all. Now what if you are asked that there are total 100 employees and you just created 2 of them, common you need to create another 98 employee objects. Now you won’t be creating objects like above as it seems tedious. Gotcha! let’s create a factory method that will be called any number of times and it will create objects and then return it to us. Yeah! write once and will be used many times.

function createEmployeeObject(firstName, lastName, gender, designation){
  var employee={};
  employee.firstName=firstName;
  employee.lastName=lastName;
  employee.gender=gender;
  employee.designation=designation;
  return employee;
}
var employee3=createEmployeeObject("Harry", "Dsouza", "M", "Project Manager");

Much convenient way, and without any duplicate codes. Just call createEmployeeObject function with your arguments and in return you get your object. What if we have several types of objects say department. Then also we will have a function that will create a department object and returns it.

So, what is common in these kinds of functions. It is:-

1. creating empty object

var myObj={};

2. returning object after populating it

return myObj;

Creating empty object and returning object is common across all functions that create objects. Javascript has created a shortcut that lets you not to write these lines when you are using function that creates objects. So, these 2 lines can be skipped. Way to do this is by using Constructors.

Using functions for creating objects is fairly common in Javascript, so Javascript provides shortcut that lets you write functions for creating objects. These special functions are called Constructor functions. Constructors are functions that lets you populate the object which you need to create.

function createEmployeeObject(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee4=new createEmployeeObject("Alan", "Marks", "F", "Business Analyst");

You must know about this keyword It points to the current object.Remember that in Constructor functions Javascript creates empty object for us, so this actually points to that object only. Javscript Construtor functions automatically returns the object after it is populated. Now how to tell Javascript that a function is called in Constructor mode, it’s the new keyword that tells Javascript to treats a function as Constructor function. Everytime you need an object, use new keyword and then call a function, and then that function prepares an object for us and returns it.

Even though Javascript is not class based, you must take care of the Constructor function name. it’s not good to use camel case, use regular one.

function Employee(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee5=new Employee("Mark", "Watson", "M", "DBA");