The new keyword in JavaScript

Getting comfortable with new keyword is a milestone in JavaScript journey. Once you break down what it does behind the scenes, it becomes a powerful and predictable tool for creating objects.

What is a Constructor Function?

A constructor function is a blueprint for creating objects. Unlike traditional object-oriented languages that use class as a fundamental construct, JS historically uses normal functions to build objects.

Here is a simple example,

function User(name, role) {
  this.name = name;
  this.role = role;
  this.isAdmin = false;
}

If you call this function normally (e.g., User('Ankit', 'Editor')) it will not work the way you think. this will point to the global object (or undefined in strict mode) and it will not return a new user object.

To make this blueprint work, we need the new keyword.

The Object Creation Process

When you put new in front of a function call it now changes how that function will be executed. It intercepts the call and performs four specific, invisible steps behind the scenes.

Lets look at what will happen when we run const user1 = new User('Ankit', 'Editor');

1. A new, empty object is created: {}

2. Prototype is linked: It links this empty object to constructor function's prototype property.

3. this is bound to the new object: The constructor function is executed, but JavaScript forces this keyword to point directly to newly created object from step 1. So, when the code says this.name = name it is attaching properties to new object.

4. object is automatically returned: JavaScript automatically returns newly created object at the end of the function.

Because of these four steps, user1 becomes a fully populated object: { name: 'Ankit', role: 'Editor', isAdmin: false }.

How new Links Prototypes

The power of new keyword is not creating variables it's prototype linking.

Assume we want every user to have a login() method. We could put it inside the constructor (this.login = function() {...}) but that means if we create 10,000 users, we are creating 10,000 duplicate copies of that function in memory.

Instead, we can put it on the constructors prototype,

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

// Adding method to blueprint prototype
User.prototype.login = function() {
  console.log(`${this.name} has logged in.`);
};

const user1 = new User('Ankit', 'Editor');
const user2 = new User('Aditya', 'Viewer');

When you call user1.login() JavaScript looks at user1 object. It does not finds a a login method there. But because new linked the object to User.prototype, JavaScript finds the login method on prototype and executes it. This saves memory.

Diagram showing relation between Constructor, Objects and Prototype

Instances Created from Constructors

The objects created by this process are called instances.

console.log(user1); // { name: 'Ankit', role: 'Editor' }
console.log(user2); // { name: 'Aditya', role: 'Viewer' }

console.log(user1 instanceof User); // true
console.log(user2 instanceof Array); // false

Even though user1 and user2 share the same login method via prototype , their data is completely independent. Changing user1.name will not affect user2.name.

Summary

The new keyword is the bridge between a function blueprint and a object. By handling object creation, this binding, and prototype linking, new allows JavaScript to achieve efficient, memory-friendly object-oriented architecture.

Thanks for Reading.