Constructor Function & New Operator in JavaScript

Javascript object Constructor function allows us to create multiple similar objects easily. We invoke the constructor function using the new operator. In this tutorial, let us learn what is a constructor function, how to create a constructor, how to create multiple objects using the constructor function, and the role of the new operator in invoking the constructor function.

What is a Constructor function?

The constructor function is a regular JavaScript function that contains a recipe to create a new object. When we invoke it using the new operator it creates a new instance of the object and returns it.

By Convention, we capitalize the first letter of the constructor function name. But that is optional and JavaScript does not care.

What is New Operator

The new operator lets us create and initializes a new object from a constructor function.

How to Create a Constructor function

We create a constructor function similar to the way in which we create functions in JavaScript.

The following is the example of a Constructor function Person. The function accepts three arguments. You can pass as many arguments or no arguments to the function

Inside the function, we create properties and assign them to the object pointed by this.

We invoke it with the new operator and passing the value for each parameter. It will create a new person object and returns it.

How New Operator works

The new operator can be used on any function. For Example the following code works without any error.

But, when we invoke any function with the new keyword, it does the following things

  1. It creates an empty JavaScript object
  2. Adds the __proto__ Property to the object and links it to the constructor functions prototype property.
  3. Binds the this context of function to the newly created object.
  4. If the constructor function returns an object then new will return it. Else it will return this. If the function returns any primitive value, it will ignore it and returns this

In the following example, the newClone function shows what new operator does behind the scene

You can compare both the objects. You will find that they are identical.

Creating Object without new

The following example shows how we can create a new object without using the new operator. This will also create a new object identical to one using the new operator.

The use case for Constructor Functions

The constructor function makes it easier to create as many objects as you want, using the same pattern.

Built-in Objects

The JavaScript includes constructors for its built-in types. We can use the new keyword to instantiate them as shown below.

Single Use constructors using new

Return from constructors

The constructor function returns this. Hence it is not common to have a return statement. But you can return any other object other than this then the new operator will use that

But if you return a primitive data type like string, number, bigint, boolean, and symbol it is ignored and this is returned

Constructor Example

Reference

new operator

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top