What java script is doing under the hood when creating an object with a constructor function?

Ok! Forget the constructor function, forget the new keyword! Let's start by creating a plain and simple object.

var engineer_one = {};
engineer.firstName = 'Elliot';
engineer.lastName = 'Alderson'; 
engineer.gender = 'M';

console.log(engineer_one);

The object engineer_one contains three properties i.e firstName, lastName and gender.

O/P:

So, if I have to store other engineers data, I would have to do the same thing. I would have to repeat the same code.

var engineer_two = {};
engineer.firstName = 'Richard';
engineer.lastName = 'hendrix';
engineer.gender = 'M';

console.log(engineer_two);

Now, you don't want to repeat the code multiple times. Remember DRY? Don't Repeat Yourself!

What you want to do is, write it once and use it multiple numbers of times.

In javascript, we have the right construction to implement DRY, Functions! Yeah!!!!! We love functions, don't we?

function createEngineerObject(firstName, lastName, gender){
   var newEngineerObject = {};

   

   newEngineerObject.firstName = firstName;
   newEngineerObject.lastName = lastName;
   newEngineerObject.gender = gender;

   return newEngineerObject;
};

var engineer_three = createEngineerObject('Bertram', 'Gilfoyle', 'M')

Now, we can use this createEngineerObject() function to create as many engineers we want without repeating the code, just by calling the function and passing the required arguments to it. Yeah! we achieved DRY!

Fairly, this became the industry standard for creating objects in JavaScript.

But, the problem with this approach is, every time you design a function for creating objects, we will have to re-write the two-lines every time i.e. initialize an inline empty object on the first line and return it on the last.

So, the JS dev team created a timesaver alternative for us. So, what's the alternative?

You guessed it! It's the magical new keyword!

So, they created a feature and called it constructor functions.

An example of a constructor function is,

function createEngineerObject(firstName, lastName, gender){
   this.firstName = firstName;
   this.lastName = lastName;
   this.gender = gender;
};

Except for this keyword, minus the initialization and return, everything else is the same.

And this is how you call one,

var engineer_three = new createEngineerObject('Bertram', 'Gilfoyle', 'M')

Except for the new keyword, it's exactly like before.

So, when we use the new keyword in front of a function call, you are telling the javascript engine to use the function to create an object. It's that simple.

Once we use the new keyword, the javascript engine understands that creating an object at the beginning and returning it, in the end, is compulsory for this function.

Since javascript is smart enough, we don't have to write it, again and again, every time we create a constructor function. Javascript is going to create an object for us and return it, under the hood.

So, the new keyword tells the javascript engine to call(run-time bind) the function as a constructor.

Now the most important concept behind the new keyword is, with the new keyword in action, javascript, under the hood, creates an object for us and makes it available to us via this keyword.

So, instead of doing this,

function createEngineerObject(firstName, lastName, gender){
   
   var newEngineerObject = {};
   
   newEngineerObject.firstName = firstName;
   newEngineerObject.lastName = lastName;
   newEngineerObject.gender = gender;

   return newEngineerObject;

};

We can do this,

function createEngineerObject(firstName, lastName, gender){
   this.firstName = firstName;
   this.lastName = lastName;
   this.gender = gender;
};

So, this is what happens when we use the new keyword.

Remember this is not a variable, it's a keyword. When you call a constructor function using the new keyword,

var engineer_four = new createEngineerObject('Dinesh', 'Chugtai', 'M')

this is the object itself. In any constructor function, when an object is created, the value of this will become the object itself.