Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

What Actually Happens Behind the Scenes

Updated
The new Keyword in JavaScript

In the previous blog, you learned how to create objects using classes.

You saw how a class acts like a blueprint and how multiple objects can be created from it.

But there is something important happening behind the scenes every time you write this:

const user = new Person("Shikhar", 25);

That small word new is doing a lot of work.

And if you understand what it does, your understanding of JavaScript becomes much stronger.


What Does the new Keyword Do?

At a simple level, the new keyword is used to create a new object from a constructor function or class.

But that is just the surface.

Behind the scenes, new performs multiple steps automatically.


Constructor Functions

Before classes were introduced, JavaScript used constructor functions to create objects.

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

Now when you use new:

const user = new Person("Shikhar", 25);

An object is created based on this function.

Classes internally work in a similar way.


What Happens Step by Step

When you use the new keyword, JavaScript does the following:

1. A New Empty Object is Created

const obj = {};

This object will eventually become your instance.

2. this is Assigned to That Object

Inside the constructor, this now points to the new object.

this.name = name;
this.age = age;

So values are assigned to the new object.

3. Prototype is Linked

The new object is linked to the constructor’s prototype.

This means the object can access shared methods.

You don’t see this step directly, but it is always happening.

4. The Object is Returned

Finally, the newly created object is returned.

So:

const user = new Person("Shikhar", 25);

user now holds that object.


Visual Flow

You can think of it like this:

Constructor → new → Object created → this assigned → Object returned

Connecting This with Classes

When you use classes:

class Person {
  constructor(name) {
    this.name = name;
  }
}

const user = new Person("Shikhar");

The same steps happen behind the scenes.

Classes are just a cleaner way to write constructor functions.


Instances Created from Constructors

Each time you use new, a fresh object is created.

const p1 = new Person("Shikhar");
const p2 = new Person("Rahul");

Both objects are separate.

Even though they come from the same constructor, they hold different data.


Important Behavior of this

Inside the constructor, this always refers to the new object being created.

function Car(brand) {
  this.brand = brand;
}

const car1 = new Car("Toyota");

Here, this.brand becomes "Toyota" for that object.


What If You Forget new?

This is a very important point.

const user = Person("Shikhar", 25);

If you forget new, JavaScript does not create a new object.

Instead, this will refer to the global object (or be undefined in strict mode).

This leads to bugs.

So always use new when working with constructors.


Real-World Example

function Student(name, age) {
  this.name = name;
  this.age = age;

  this.printDetails = function() {
    console.log(this.name + " is " + this.age);
  };
}

const student1 = new Student("Amit", 20);
const student2 = new Student("Neha", 22);

student1.printDetails();
student2.printDetails();

Each object has its own data but follows the same structure.


Understanding Prototype Linking (Simple View)

When an object is created, it is connected to the constructor’s prototype.

Object → linked to → Constructor.prototype

This allows objects to share methods instead of duplicating them.

You don’t need to go deep into this yet, just remember that this connection exists.


Why the new Keyword is Important

Without new, object creation becomes manual and repetitive.

With new, JavaScript handles:

  • object creation

  • this binding

  • returning the object

It simplifies everything.


Final Thought

The new keyword may look small, but it plays a huge role in how JavaScript creates and manages objects.

It connects constructors, objects, and this together.

Once you understand what happens behind the scenes, your code becomes more predictable and easier to reason about.

Object Oriented JavaScirpt

Part 2 of 2

Object-Oriented JavaScript is a practical series focused on helping you understand how OOP works in JavaScript. From objects and prototypes to classes, inheritance, and core OOP principles like encapsulation and polymorphism, this series breaks everything down into simple, real-world examples. By the end, you’ll not only understand OOP concepts but also know how to apply them to write cleaner, scalable, and maintainable JavaScript code.

Start from the beginning

Understanding of Object-Oriented Programming in JavaScript

So far, you’ve learned how to work with objects and how this behaves inside them. You’ve also seen how functions can be reused and controlled. But there is still a problem. Imagine you need to create