new keyword in javaScript

The new keyword in javaScript is a core and important concept for interview perspective and also to understand js behaviour most of the beginner does not study the behaviour of new keyword. What does it do behind the scene?

What does new keyword do?

We all use new keyword while writing the code and most of the use with class when want to create new instance and every instance is different from each other. because instance is a object.

console.log({} === {});
//Output: false;

This return false value both of them point to different address so behind the scene every time new keyword create a new object or instance.

new keyword work steps:

• Create a plain object.

• Link the prototype.

• Bind this.

• Return the object.

Object creation

Let's understand with example suppose new keyword does not exist and now we have to create a function which create every time new object.

function newEmployee(name="", position="", age=0){
    const employee = {};
    employee.name = name;
    employee.position = position;
    employee.age = age;
    
    return employee;
} 

const employee101 = newEmployee("Happy", "software developer", 21);
const employee102 = newEmployee("Rohan", "software tester", 21);

In this example every time create a new instance It is familiar with when create new instance using new keyword. There are multiple way to do that same thing it is just one of way of them.

Now let's take a one look on constructor function.

Constructor function

Constructor function is a special type of function used to create and initialize multiple objects of the same type. constructor function name start with capital letter for convection.

function User(name, age){
    this.name = name;
    this.age = age;
    
    this.greetUser = function(){
        console.log(`Welcome ${this.name}!`);
    }
}

const happy = new User("Happy", 21);
happy.greetUser();

The constructor function need to new keyword for initialize and bind with this keyword.

Now let's see how new keyword does prototype links?

Prototype link

While creating the new object through new keyword it link the prototype with the created object this.__proto__ = fn_name.prototype.

"use strict";

function EmployeeConstructor(name, position, age) {
  /**
   * What is happening behind the scenes when we invoke with "new" keyword
   *
   * this = {};
   * this.__proto__ = EmployeeConstructor.prototype;
   *
   */
  this.name = name;
  this.position = position;
  this.age = age;
  /**
   *
   * if we haven't returned object, array or function, the new keyword implicitly returns this
   * if we try to return anything except object, array or function, return this (the scoped object)
   * i.e. return "I am string" would still return this
   *
   * return this;
   */
}
const employee = new EmployeeConstructor("Neko", "FE dev", 30);
console.log(employee);

This example shows proper flow of new keyword how the behind the scene new keyword works.

Instance created with constructor

As we see in the above example created instance using constructor function so class is just a syntactic sugar the same can do with function.

function Car(name, model, price){
    this.name = name;
    this.model = model;
    this.price = price;

    this.showName = function(){
        return this.name;
    }
    
    this.showModel = function(){
        return ths.model;
    }
    
    this.showDetail = function(){
        return `Name: \({this.name} | Model: \){this.model} | Price: ${this.price}`;
    }
}

const bnw = new Car("BMW", "BMW X1", 50000);
const rollsRoyce = new Car("Rolls royce", "Cullinan Series II", 75000000);

The same example you have seen many time with class there is a misconception in beginner the new keyword is used only with class. In the whole I did not use class keyword but still create new instance.

That's all in this blog with new keyword.