Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Updated
5 min read
The new Keyword in JavaScript
T
Software Engineer exploring full-stack systems, scalable architectures, and product-focused development. Experienced with React, React Native, Flutter, TypeScript, Node.js, monorepos, and tRPC. Passionate about building performant applications, solving complex engineering problems, and continuously learning across domains.

When I first started programming, I learned C++, and in C++ the new keyword is used for dynamic memory allocation, meaning you explicitly ask the system for memory on the heap and you manage it yourself.

So, when I came to JavaScript and saw the same keyword, I naturally assumed it was doing something similar, but that assumption turned out to be completely wrong and honestly created a lot of confusion for me, especially because I was already trying to understand OOP concepts at the same time.

As I started going deeper into JavaScript, I realized that the new keyword here is not about memory at all, but about how objects are created and how JavaScript connects functions, objects, and prototypes behind the scenes, and once that clicked, a lot of things that previously felt random actually started making sense.


Thinking in Terms of Blueprints

Before going into the technical explanation, it helps to think of this in a simple way: instead of thinking about memory like in C++, think about a blueprint and the objects created from it, where you define a structure once and then create multiple objects that follow that structure but hold different data.

In JavaScript, this blueprint is what we call a constructor function.

Constructor Functions

A constructor function is just a normal function, but it is intended to create objects and by convention its name starts with a capital letter.

function User(name) {
    this.name = name;
}

At first glance, this looks like any other function, but the behavior changes when you use it with the new keyword, because new is what turns this function into something that actually constructs objects.

For example, when you write:

const user = new User("Tushar");

it may look like a simple function call, but internally JavaScript is doing multiple steps to create that object.

  • It creates a new empty object

  • It links that object to the constructor’s prototype

  • It binds the this keyword inside the function to this newly created object

  • It executes the function so that properties like this.name = name get assigned to that object

  • It finally returns the object


What JavaScript Is Doing Behind the Scenes

If we translate that into something more explicit, it is roughly doing something like this behind the scenes:

const obj = {};
obj.__proto__ = User.prototype;
User.call(obj, "Tushar");
return obj;

All of this is handled automatically by the new keyword, which is why understanding it is important because otherwise it feels like JavaScript is doing hidden magic.


Understanding prototype and __proto__

At this point, two things become very important to understand: prototype and __proto__, because without these, the object creation process is incomplete.

The Role of prototype

Every constructor function in JavaScript has a property called prototype, which is simply an object where shared methods and properties are stored, so instead of every object having its own copy of a function, all objects can refer to the same function through this prototype.

User.prototype.sayHello = function () {
    console.log("Hello " + this.name);
};

Now, every object created using new User() can access this method, not because it exists directly inside the object, but because of the link created through the prototype.

The Role of __proto__

On the other side, every object has an internal property called __proto__, which points to the prototype of the constructor that created it.

const user1 = new User("Tushar");
user1.__proto__ === User.prototype

This is what connects the object to shared methods.

Because of this link, when you try to access something like:

user1.sayHello();

JavaScript first checks if sayHello exists inside user1, and if it does not find it, it follows the __proto__ link to User.prototype and finds it there, which is why the function works even though it is not directly inside the object.


Instances and Shared Behavior

Each time you use the new keyword, a completely new object is created, which means the data inside each object is different, but the structure and behavior can be shared.

const user1 = new User("Rohit");
const user2 = new User("Virat");

Here, user1.name and user2.name are different, but both objects share the same sayHello function.

user1.sayHello === user2.sayHello

This returns true, because both are referencing the same function stored in the prototype.

If we simplify the entire process, the flow looks like this: a constructor function acts as a blueprint, the new keyword creates a new object, links it to the prototype, binds this, executes the function, and returns the final instance.

One common mistake that happens, especially when you are new to this concept, is forgetting to use the new keyword and calling the constructor function like a normal function, which means no new object is created and this does not behave as expected, often leading to bugs that are hard to debug.


Conclusion

In the end, the new keyword in JavaScript is about constructing objects in a structured way, connecting them to shared behavior through prototypes, and making sure each instance has its own data while still being efficient.

Once you understand this, JavaScript stops feeling like it is doing random things behind the scenes, and instead starts to feel like a system that is carefully building objects step by step.

More from this blog