How Exactly Does the ‘new’ Keyword work in JavaScript?

Knowing how exactly things work in programming languages is very crucial for programmers rather than assuming the way they work. This allows you to tackle problems differently and come up with efficient solutions. And I would say that it gives you confidence in your code.

There are many powerful keywords in programming languages and programmers don’t make much from them as they misunderstand them. For example, the “this” keyword in JavaScript is a very powerful keyword. Unfortunately, many programmers are not aware of it. By the way, if you are one of them, I highly recommend you to read my article on the topic below:

How exactly “this” keyword works in Javascript

Moving forward, I assume that you have a good understanding of objects in JavaScript. If you misunderstand some features in JavaScript, you always run into errors in your code. The “new” keyword is not one of them. Almost every programmer uses the “new” keyword to create instances of classes and they barely run into problems. The purpose of this article is to show how the “new” keyword makes our lives much easier.

You can create objects in various ways. One of them is by using functions. Let’s see how it is done. We declare a function which returns an object. You will understand what that means by looking at the following code snippet.

As the above function “createEmployee” returns an object, we call it a factory function. On line 8, we make a link between the “employeeFunction” object and an empty object which is returned by “Object.create()”. And then on line 9 and 10, we assign the arguments to properties of the newly created object which is “newEmployee”. And then we return it.

As a summary, we

1. Created an empty object
2. Established a link to “employeeFunctions”
3. Assign the given Arguments to the properties of the object
4. Returned the object

Now let’s see the “new” keyword in action.

The new keyword does 4 things:

1. Creates an empty object
2. Establishes a link to “CreateEmployee.prototype” object
3. Assigns the created object to this
4. Returns “this”(If no object returned from the function)

The above code snippet is almost equal to the previous code snippet. I said almost because in the first code snippet, we made a link to the “employeeFunctions” object but, in the second code snippet we made a link to the “CreateEmployee.prototype” object. That is the only difference.

I presume you remember we did four things to create and return an object. The “new” keyword does all four things for us. We just have to invoke the function with the “new” keyword. We call the functions invoked by the new keyword “constructor” functions. The following code snippet shows how line 10 resolves:

This is how we make instances of classes in JavaScript. The class keyword can be thought of as syntactic sugar for constructor functions (this is only partially accurate).

If you have been wondering what the prototype object is, I highly encourage you to read the following article linked below:

Deep understanding of prototypes in javascript

More content at plainenglish.io