Prerequisites

Familiarity with constructors.
Familiarity with this, call, apply and bind.

Introduction

In this article, we will learn about the new operator and its significance in javascript. If you are new to new operator 😉 do not worry you have landed in the right place to start with.

Why do we need new operator in the first place?

Objects in javascript are one of the most used data structures. The easiest way to create an object is using object literal notation. So, if we want to create a person object we can create it as follows:

const person = {
  name:"Ankit",
  displayName(){
      console.log(this.name)
    }
}

The above syntax for creating objects is called object literal notation. But in case you want to create multiple objects with having the same blueprint, object literal is not the best way to do so because it violates the DRY principle. But do not worry Javascript has something called a constructor function, which helps in creating instances of the same type. Constructor to rescue.

const Person = function(name){
  this.name = name
  this.displayName = function(){
    console.log(this.name)
  }
}

const ankit = new Person("Ankit")
const nitin = new Person("Nitin")

But did you notice one thing, while creating the instance of the constructor function we used the new operator? So, now let's see what goes behind the scene when we create an instance of a constructor using new operator.

What does the new operator do behind the scene?

When we create an instance of a constructor function or class in javascript we use new operator the new operator does various things behind the scene. Let's look at each one of them one by one.

Creates an empty object and binds it with this

Whenever we create an instance with new operator. It creates an empty object and assigns it to this inside the constructor function. So, when we created the instance of our Person constructor,

const ankit = new Person("Ankit")

the above code is equivalent to,

const ankit = Person.call({},"Ankit")

Returns this implicitly from the constructor function

Another thing that the new operator does is, it returns this implicitly from the constructor function. This can be better understood with the example below:

const Person = function(name){
// whenever an instance is created with new operator
// it creates an empty object
// and assign it to this inside constructor function
// so this = {} 
  this.name = name
  this.displayName = function(){
    console.log(this.name)
  }
//At this line
// this = { name :"Ankit", displayName:function(){console.log(this.name)}
//and it implicitly returns this so no need to write below return statement
return this
}

So, whenever we create an instance like the below :

const ankit = new Person("Ankit")

the this returned by the constructor function gets assigned to the variable on the left-hand side(in our case it will get assigned to ankit).

Adds proto property to the empty object that gets created

We know that every function/constructor function in javascript has a property called prototype. Let's see how it looks like :

The newly created empty object using a new operator gets a property called proto that gets assigned the value of Constructor.prototype. In our case:

{}.__proto__ = Person.prototype

Brown Elegant Leaf Circle Frame Logo.png and now since we know the empty object gets bind with this inside constructor which is then returned from the constructor, Therefore, if we compare the instance that gets created and the constructor prototype they will be equal. Let's check it for our Person constructor.

Did you notice the proto property of ankit object is equal to Person.prototype?

That was all about new operator and what it does behind the scene.

Summary

The javascript new operator is used to create an instance of the constructor function. It does the following things behind the scene:

Creates an empty object and binds it with the this.
Returns this implicitly from the constructor function.
Add a proto property in the newly created object and assign it equals to Constructor.prototype.

Thanks for reading. If you have any suggestions feel free to reach out in the comment section below

P.S: Thanks to Arun for proofreading this blog.

Kumain's blog