Mastering JavaScript: Demystifying new keyword

In this article we will learn what the new keyword does when we use them.

Let's say you want to create an user object which also consists of some util functions, since these are common function we need only single copy of it in memory, to achieve this we can use the concept of prototype chaining.

function newUserCreator(name, numberOfClicks){
    const newUser = Object.create(utilFunctons);
    newUser.name = name;
    newUser.numberOfClicks = numberOfClicks;
    return newUser;
}

const utilFunctons = {
    increment : function () {
          this.numberOfClicks++;
        }
}

const user1 = newUserCreator('John Doe', 6);
user1.increment();

In the above code we are Object.create is taking utilFunctions object as an argument and attaching it to the __proto__ property to the empty object it returns. With the above implementation we have achieved our goal where any user object should by default have access to the single instance of utilFunctions.

But we have do lot of work of creating the object and attaching required template to avoid duplication and keep our code consistent. There should be better way to handle this, an automated way to bring their fellow objects to life. Enter the new keyword, the magical incantation that would change everything!

The Enchantment of new

When we cast the new keyword, it performs a series of magical steps to create a new object and does all wiring required for us. Let's see magic formula for it and then break it down:

function userCreator(name, numberOfClicks) {
  this.name = name;
  this.numberOfClicks = numberOfClicks;
}

userCreator.prototype.increment = function () {
  this.numberOfClicks++;
};

userCreator.prototype.login = function () {
  console.log("login");
};

const user1 = new userCreator("John", 9);
user1.increment();

So let’s understand what is happening behind the scenes, when we declare a function let say userCreator, the function also is a object.

For example, let’s say a function add(3,2), we can also do this add.stored = 5 , so in JavaScript function is just an function, we can call them function object combo.

So in our above code userCreatoris a function but it is also an object, which has the property prototype which also an empty object.

In the next line we are finding the userCreator in our memory and in prototype object we creating increment property and assigning the function and in the next line we are assigning the login function to userCreator prototype object by creating login property.

Now the next line automates lot of things using new keyword, which otherwise we had to manually. The first thing it does is create an empty object and assign that to this keyword.

Next thing it automates is in this object, there is [[Prototype]] property which has the reference to userCreator.prototype object. Once these things are done we can execute the userCreator function, which store the name and numberOfClicks in this object.

And the last thing it does is return the this object which is stored in user1 variable, which has the name, numberOfClicks and hidden proto bond to the shared function in the prototype object of userCreator. If you inspect the returned object you should see something like below.

But we need to be very careful when use this for creating object, as we need to show other developer that the function is going to be used with new keyword, otherwise if just call the function there will an this object sitting in global memory.

There is a way to avoid this by using class keyword, which we will learn in different blog. Till then keep exploring.