The new Keyword in JavaScript

The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

What Does the new Keyword Actually Do?

When a function is called with the new keyword, the function will be used as a constructor.

new operator will do the following things:

1. It creates a new object.

2. It sets this new object's internal, inaccessible, [[prototype]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).

3. It makes the this variable point to the newly created object.

4. It executes the constructor function, using the newly created object whenever this is mentioned.

5. It returns the newly created object, unless the constructor function returns a non-null object reference. In this case, that object reference is returned instead.

Note - Classes can only be instantiated with the new operator — attempting to call a class without new will throw a TypeError.

The new with constructor functions

Constructor functions in JavaScript are regular functions designed to create and initialize multiple objects with shared properties and methods.

Creating an object with a user-defined constructor function requires two steps:

1. Define the object type by writing a function that specifies its name and properties. For example, a constructor function to create an object Person might look like this:

   function Person(name,email){
   this.name = name;
   this.email.email;
   }
   

2. Create an instance of the object with new.

   const mukul = new Person("Mukul","mukul123@gmail.com");
   

The new with classes

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const p = new Person("Mukul");
p.greet(); // Hello, my name is Mukul

The Object Creation Process and the new Links Prototypes

In the object creation with the new keyword , the js perform the five steps.

1. Creates a brand new empty object

   {} — let’s call it newObj.

2. Links the new object’s prototype

   Sets newObj.__proto__ (or more accurately, [[Prototype]]) to Person.prototype.

3. Binds this to the new object

   Inside the constructor function, this now refers to newObj.

4. Executes the constructor body

   The code inside Person() runs, attaching name and email value to newObj.

5. Returns the new object (automatically)

   No need to mention return explicitly, JavaScript returns newObj for you automatically and implicitly.

And in the new prototype linking process, every instance created with new Person() has instance.__proto__ = Person.prototype.