What is Constructor Function in Javascript | Full Guide

What is Constructor Function in Javascript

In this article, we will see what is constructor function in Javascript. We know that object constructor and object literal notations are convenient for creating a single object. If we want to create multiple objects of the same type, then we take the help of the Constructor Function.

Before understanding the syntax of the constructor function and how we create objects using the constructor function, first I want to discuss why the constructor function.

Note :

Creating multiple objects of the same type using Object constructor and object literal notation:

  1. Increase code redundancy
  2. More time consuming
  3. Difficult to manage

Creating multiple objects of the same type using the constructor function:

  1. Reduces code redundancy
  2. Less time consuming
  3. Easy to manage

Example code for object literal notation

var rect1 = {
width:5,
height:5,
getArea:function(){
return this.width * this.height;
}
}
document.write(rect1.getArea())
// output: 25

var rect2 = {
width:6,
height:6,
getArea:function(){
return this.width * this.height;
}
}
document.write(rect2.getArea())
// output: 36

Steps:

  1. In the <script> tag, we have created the “rect1” object using the Object literal, rect means rectangle.
  2. In between the rect1 object flower brackets, we have properties and behavior.
  3. The “width” property has a value of 5 and “height” property has a value of 5. The “getArea” property has the value “function()” and returns the height/width value inside the function.
  4. And display the area of rect1 using document.write() method.
    We have also created the rect2 object in the same way

Similarly, if we create many objects, our code redundancy will increase. So, we should use the constructor function for less code redundancy and time consumption. Now, we are going to create the same rect1 and rect2 using the constructor function.

READ ALSO  How to Call External Javascript Function From HTML

Example code for Constructor function

function rectangle(width, height){
this.width = width;
this.height = height;
this.getArea= function(){
return this.width * this.height;
}
}

var rect1 = new rectangle(8,8);
var rect2 = new rectangle(5,9);
document.write(rect1.getArea(), "<br/>");
document.write(rect2.getArea());
/*
Output:
64
45
*/

Steps:

  1. Here, we have created a constructor function for all “rectangles”. First, we write the keyword “function” and then write the function name like ‘rectangle’.
  2. We have created a constructor function with the name “reactangle”. Every rectangle with have width and height, so we have passed the parameter (width, height) for the function.
  3. In the flower brackets of the function, the constructor function is responsible for constructing an object. We need to assign the user-supplied “width” value to the “width” parameter. So we need to use the “this” keyword to get the value given by the user. In the above, we write (this.width = width).
  4. Similarly, we need to assign the user-supplied “height” value to the “height” parameter, so we assign (this.width = width).
  5. Then “getArea” property has the value “function()” and returns the (this.height * this.width) value inside the function.
  6. Now, we created a constructor function. Using this constructor function, you can create any number of objects for a “rectangle”.
  7. Then we create an object called “rect1” with a width value of “8” and a height value of “8”. Then we create another object called “rect2” with different width and height values.
  8. And finally ,to display the width and height value of the rectangle, use (document.write) method and pass “objectname.getArea()” function inside it.

Conclusion

So, this is the advantage of the constructor function.

Leave a Reply