Share

You may have heard before about constructors in object oriented languages such as C++ and Java. The same concept also exist in javascript but with a different methodology.

Constructors are usually used in the creation of objects. In languages such as C++ in order to create objects you have to create a user defined class. However in javascript to create an object you have to create a constructor function. Note that in Ecmascript 6 there is a modern way of creating objects using classes but it’s not fully supported yet a cross web browsers, so in this article we will talk about constructor functions.

A constructor function is a simple javascript function that is used to create objects using the “new” keyword. So instead of calling the function directly you have to invoke it with “new” keyword. 

Consider this example:

function Rectangle()
{
    this.width = 70;
    this.height = 40;

    console.log("new object created!");
}

Now to create an object from Rectangle  we have to use the new keyword:

var rectangle = new Rectangle();
console.log(rectangle);

Now check the console you will see this output:

new object created
Object { width: 30, height: 40 }   // object

As you see in the output that the rectangle type is an object not Function. Also you can view the object constructor using javascript constructor property like so:

console.log(rectangle.constructor);

// output
function Rectangle()

But how this is works? The secret behind that is the “this” keyword in the above function. “this” is a special keyword in javascript like var, let, const etc. “this” refers to the current object when a new object is created. So “this” is useless until a new object instantiated.

So in the above example when i create a new object like this:

var rectangle = new Rectangle();

Now “this” refers to the rectangle object, therefore using rectangle object i can access any property inside the function like so:

console.log(rectangle.width);
console.log(rectangle.height);

Another advantage of constructor functions is that you can create as many objects as you can, each object has it’s own state:

var rectangle2 = new Rectangle();
rectangle2.width = 50;
rectangle2.height = 20;
console.log(rectangle2.width, rectangle2.height);
        
var rectangle3 = new Rectangle();
rectangle3.width = 200;
rectangle3.height = 80;
console.log(rectangle3.width, rectangle3.height);

Constructor Function Parameters

As with normal javascript functions you can pass parameters to constructors as well, so modify the above example to pass the width and height of rectangle:

function Rectangle(width, height) 
{ 
    this.width = width; 
    this.height = height; 
             
    console.log("new object created"); 
}
        
let rectangle1 = new Rectangle(70, 20);
console.log("Rectangle 1: " , rectangle1.width, rectangle1.height);
        
let rectangle2 = new Rectangle(300, 50);
console.log("Rectangle 2: " , rectangle2.width, rectangle2.height);

// output
new object created
Rectangle 1:  70 20
new object created
Rectangle 2:  300 50

Also you can pass a parameter that’s is also a parameter created from a constructor function.

For example in the above example if we want to add another argument that specify the rectangle style like background, border type, etc, we can make another constructor function like this one:

function RectStyle(background, borderStyle)
{
    this.background = background;
    this.borderStyle = borderStyle;
}

Then create a new object from this function:

var rectangleStyle = new RectStyle("red", "dashed");

Then pass this argument as a third argument to Rectangle:

function Rectangle(width, height, rectStyle) 
{ 
     this.width = width; 
     this.height = height; 
     this.rectStyle = rectStyle;
     console.log("new object created");  		 
}

Now when creating a new instance of Rectangle pass the third argument “rectangleStyle” as shown:

let rectangle1 = new Rectangle(70, 20, rectangleStyle);

As this point you can access any rectangle style property from rectangle1:

console.log(rectangle1.rectStyle);
console.log(rectangle1.rectStyle.background);   // red
console.log(rectangle1.rectStyle.borderStyle);   // dashed

Built in Constructors In Javascript

Javascript have many built-in constructor functions for each primitive types like String, Number, Boolean, Object, etc.

For example you can declare a string like this:

const str = new String("hello world");

console.log(str);   // Object String {'hello'}

Also you can declare numbers:

const num = new Number(200.56);
        
console.log(num);  // Number {200.56}

But be careful don’t use this approach as it slows down the program, instead use the primitive types directly.

Declaring Methods Inside Constructors

Like declaring properties inside constructor functions we can declare methods also, using the “this” keyword and those methods is accessible outside when a new object is created.

Imagine in the above example that we want to add a method to draw the rectangle on the browser window:

<canvas width="600" height="600" id="my_canvas"></canvas>

    <script>

        function Rectangle(x, y, width, height, color) 
        { 
             this.width = width; 
             this.height = height; 
             
             this.draw = function () {
                var canvas = document.getElementById('my_canvas');
                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = color;
                    ctx.clearRect(x, y, width, height);
                    ctx.fillRect(x, y, width, height);
                }
             } 
        }
        
        let rectangle1 = new Rectangle(30, 50, 150, 50, 'green');
        rectangle1.draw();
        
        let rectangle2 = new Rectangle(300, 200, 300, 50, 'red');
        rectangle2.draw();
    </script>

Here i have added the draw() method which draw rectangle using Javascript canvas api. Then i declared two instances of the Rectangle, and passing different parameters for x,y, width, height, and color. Finally calling draw on each object.

In addition to that we can also add properties and methods to already created objects to add new functionality to that object. For example let’s add a method to calculate the area of rectangle:

rectangle1.getArea = function() {
    return this.width * this.height;
}
        
console.log(rectangle1.getArea());

// output
7500

However this method is only available on rectangle1 only not shared across any Rectangle object.

So any attempt to invoke getArea() on rectangle2 you will get an error:

console.log(rectangle2.getArea());   // Uncaught TypeError: rectangle2.getArea is not a function

This is some of the advantages of constructors is that as i mentioned above every object has it’s own state. But if you need that the getArea() method to be available globally on every instance, there is a way using the object prototype. 

Object Prototypes

According to MDN prototypes are the mechanism by which JavaScript objects inherit features from one another. Every object in javascript has it’s own prototype which enable us to modify that object to add certain properties and methods.

You can get the prototype of any object using Object.getPrototypeOf() method like so:

console.log(Object.getPrototypeOf(rectangle1));

If you run this you will see something similar to this output:

{constructor: ƒ}
   constructor: ƒ Rectangle(x, y, width, height, color)
   ....
   ....

The object prototype displays the structure of the object which consists of the function argument, caller, length, name, and other info like toString(), valueof.

Using the object prototype we can easily add methods and properties to an existing object which will be available globally across all instances of that object.

So let’s modify the getArea() method to be accessible to every instance of Rectangle:

Rectangle.prototype.getArea = function() {
    return this.width * this.height;
}
        
console.log("Rectangle 1 area: ", rectangle1.getArea());
                
console.log("Rectangle 2 area: ", rectangle2.getArea());

output:

Rectangle 1 area:  7500
Rectangle 2 area:  15000

Also we can add properties:

Rectangle.prototype.shapeType = "Rectangle";

console.log(rectangle1.shapeType);

// output
Rectangle

In the same way you can modify existing Javascript constructors like String, Number, etc. For example imagine you want to add a method to capitalize every word in string. We can add this method as follows in the String prototype:

String.prototype.capitalize = function() {
    return this.toLowerCase().replace(/\b[a-z]/g, function(a) {
            return a.toUpperCase();
      });
}
        
const str = "hello world";
console.log(str.capitalize());  // Hello World

Freezing Objects

You can prevent an object from being modified either to not allow adding properties or methods or not to modify the object prototype by using Object.freeze(obj) method. This method accept either a literal object or an object created with a constructor function.

Let’s modify our previous example and call Object.freeze() on rectangle1, then modify the shapeType property:

Object.freeze(rectangle1);
        
rectangle1.shapeType = "Square";
        
console.log(rectangle1.shapeType);

If you run this example you will see that the shapeType is still Rectangle not Square, and this is the intended behavior of Object.freeze(). In strict mode this example will trigger an error like this:

Uncaught TypeError: Cannot add property shapeType, object is not extensible

Also you can’t add new methods to frozen objects:

Object.freeze(rectangle1);

rectangle1.printWidth = function() {
    console.log("My width", this.width);
}
        
console.log(rectangle1.printWidth());     // Uncaught TypeError: rectangle1.printWidth is not a function
    

To detect that an object is frozen or not we can use Object.isFrozen(obj) method:

console.log(Object.isFrozen(rectangle1)); // true

Some benefits from freezing objects when you intend to build a third party package or library and you don’t want users to modify the internal implementation of the library.

Checking For Object Properties

To check the existence for specific property in an object there is many ways. The first we can use hasOwnProperty() method. But this method return true if this property is a direct in the object.

For example:

console.log(rectangle1.hasOwnProperty('width'));  // true

Or more better syntax:

console.log(Object.prototype.hasOwnProperty.call(rectangle1, 'width'));  // true

For inherited properties false is returned

console.log(rectangle1.hasOwnProperty('toString'));  // false

To check for direct and inherited properties the “in” operator can be used:

console.log("width" in rectangle1);     // true
console.log("toString" in rectangle1);  // true

To get the list of all properties of an object we can either of these methods:

• Iterate the object with for..in

for(var i in rectangle1) {
     console.log(i + ' -> ' + rectangle1[i]);
}

• Using getOwnPropertyNames() method:

Object.getOwnPropertyNames(rectangle1).forEach(function (val) {
           console.log(val + ' -> ' + rectangle1[val]);
 });

Note that the later method using getOwnPropertyName() doesn’t return the properties defined after the object is created like shapeType while the first method return all the properties.