The new keyword in JavaScript

What the new keyword does.

So let's first understand the problem statement, Why do we use the new keyword?

• The problem was that we need to dynamically create objects. We want to add values ​​to objects, and whenever we access an object's methods, they should operate on the current object's values. This means we want to access the current object's properties and perform operations on those properties using the same object's methods.

• So how can we do this?

We have two approaches.

Factory Function Approach:-

• We can create a simple factory function. This means we create a function and have it return an object. Whenever we want to add new values, we pass them as parameters, and those values ​​go inside the returned object. We can then easily access that object.

• This way, every time we call the function, a new object is created.

• So this is the first approach.

Using the new keyword :-

• Now let's discuss the second approach, why we use the new keyword.

• The reason is that the factory function approach is not optimized and they can take up more memory. That's why we use the new keyword.

• Internally, the new keyword also creates a new object instance each time it is called. But this approach is more efficient than a factory function. It works with constructor functions.

In the next section, we'll look at what constructor functions are and how they work.

For now, you should have a basic understanding of why we use the new keyword. You'll understand this more clearly as we progress.

Constructor functions.

So in a constructor function, we basically create a blueprint for an object. It is similar to classes, but before classes were introduced, we used constructor functions.

• It acts like a structure for creating objects. Whenever we want to insert values, we use the new keyword. The new keyword creates a new object instance. Basically, it follows some internal steps to create a new object and to connect methods with it.

• Now let’s understand it step by step in simple terms.

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

//Adding a method to the prototype
User.prototype.getFullName = function() { 
return `\({this.firstName} \){this.lastName}`;
};

const user1 = new User('Nikhil', 'Developer');
console.log(user1.getFullName());

• First, we use the function keyword, then give the function a name. Usually, we write the first letter in uppercase because it is a convention for constructor functions.

• Then we accept values ​​using parameters.

• Inside the function, we use this keyword. Because when we use the new keyword, every time a new object instance is created, each object gets its own this. That's why we use this to assign properties to the current object.

• So this becomes our constructor function. Now, how do we use it?

• We create a variable so that we can access its methods, properties, and prototype methods. Then we use the new keyword to create an object instance. As discussed, new performs some internal steps (we will discuss those later).

• Now, an important point, with constructor functions, you can define your own prototype methods with your own logic.

• Every time you call a method on an object, it has access to the prototype. And that prototype can access the object's properties using this.

• No matter how many objects you create, the prototype is created only once, but it is shared among all objects. However, when a method runs, this refers to the current object, so it works with that object’s data.

• So now you can understand why we prefer constructor functions over factory functions, Constructor functions are more memory efficient because methods are shared via prototype instead of being recreated for every object.

So above is the code understanding we write , how it's work.

Object creation process.

So basically, there are four steps when an object is created using the new keyword. As discussed above, now let’s understand how all these steps are initialized step by step.

Step 1 :-

• An empty object is initialized.

• That means a blank object is created internally.

Step 2 :-

• That empty object is linked with the prototype.

• This means if you define any methods on the prototype, those methods will be attached there and will be accessible to all objects created from that constructor.

Step 3 :-

• The this keyword is set to the newly created object.

• That means this now refers to that new object, just like we used inside the constructor function.

Step 4 :-

• Finally, the new object that was created is automatically returned.

So this is how the object creation process works internally when using the new keyword.

How new links prototypes.

So how does the new keyword link the prototype?

• When you use the new keyword to create a new object instance, in the second step, it links that newly created empty object with the constructor’s prototype.

• That means the empty object gets connected to Constructor Function prototype. Because of this link, any methods you define on the prototype become available to that object.

• So first, the object is created, then it is linked to the prototype. That's why the object can access those methods.

• After that, in the next step, the this keyword is set to refer to that same object. So when you use this inside the constructor or inside prototype methods, it works with that current object’s data.

• So in simple terms, new creates an object - links it to the prototype - sets this → and because of that link, the object can use prototype methods.

Instances created from constructors.

So whether it is a constructor function or a constructor inside classes, the main job is almost the same, it initializes an object, meaning it creates an object instance.

• In a constructor function, you basically keep a blueprint. You define what values ​​will come, and based on those values, you create an object.

• You can also provide default values ​​in the constructor. If no value is passed, then the default value will be used.

• The same concept applies to constructors in classes as well. The constructor in a class also does the same thing: it initializes the object and assigns values ​​using this.

• So in short, both constructor functions and class constructors work in the same way internally, they just have different syntax.