How NEW Keyword works in Constructor function - JAVASCRIPT!

How NEW Keyword works in Constructor function - JAVASCRIPT!

We know how NEW is important in OOP

In Object Oriented Programming we use NEW to instantiate the object for a class, just to access the functions and its variable, well its only for the people who know such mechanisms, and have knowledge of OOP or come from the background of JAVA

The below code is how Javascript developers write using Object oriented style to access the properties or function

class Person
{
    constructor() {
        this.name='Pranit Rathod';
        this.age=23;
    }
    greet()
    {
        console.log(`This is ${this.name} and his age is ${this.age}`);
    }
}
new Person().greet();

Explaining above code

The provided code is written in JavaScript and defines a class called "Person." This class has a constructor method, which is a special method that is automatically called when a new instance of the class is created. Inside the constructor method, two properties, "name" and "age," are initialized with specific values.

Here's a breakdown of the code in technical terms:

  1. Class Definition:

    • class Person defines a new class named "Person."
  2. Constructor Method:

    • constructor() is a special method that is automatically called when a new instance of the "Person" class is created.

    • Inside the constructor, two instance properties, "name" and "age," are initialized. These properties are specific to each instance of the class, and their values are set to "Pranit Rathod" and 23, respectively.

  3. Method Definition:

    • greet() is a method defined within the "Person" class. This method can be called on instances of the "Person" class.
  4. console.log():

    • Inside the greet() method, there's a console.log() statement that logs a message to the console.

    • The message is a template literal (a string enclosed in backticks, ``) that includes the values of the "name" and "age" properties.

  5. Instance Creation and Method Invocation:

    • The last line of the code creates a new instance of the "Person" class using the new keyword: new Person().

    • After creating the instance, it immediately calls the greet() method on this new instance: new Person().greet();

When you run this code, it creates a new "Person" instance, and the greet() method is invoked on that instance. The console.log() statement inside the greet() method will print a message to the console, displaying the name and age of the person, in this case, "Pranit Rathod" and 23.

But how does NEW keywords work in Javascript if we use constructor function without class???

function person()
{
   this.name='Pranit Rathod';
    this.age=23;
  this.greet=function ()
    {
        console.log(`Without using OOP style constructor we get same O/P \n This is ${this.name} and his age is ${this.age}`)};
}
per=new person();
per.greet();

Explain how above code works without classes

Well,if you carefully observe that 'THIS' is used to access the object properties but when we use 'NEW' keyword to create an object we tell the javascript to get the access of function and all the properties along with it but how does it actually works behind the scene?

function person()
{
    this={}//OBSERVE THIS 
   this.name='Pranit Rathod';
    this.age=23;
  this.greet=function ()
    {
        console.log(`Without using OOP style constructor we get same O/P \n This is ${this.name} and his age is ${this.age}`)};

return this;//OBSERVE THIS 
}

per=new person();
per.greet();

In the above code 'OBSERVE THIS comment' that's were all your properties and functions are stored inside the curly braces more technically writing an object {}

It also writes the object when it reaches the end of the statement but more importantly, it creates an object internally and put all the properties and function inside the object whenever we use NEW for a constructor without class, this is very useful and powerful approach when we want to write constructor way style without creating a blueprint i.e class,and then at the end it also returns to the call function!