The new Keyword in JavaScript

Imagine you are building a brand new social media application. Your first task is to create user profiles. If you only have one user, creating their profile in JavaScript is incredibly easy. You just write a simple object:

const user1 = {
    name: "Suprabhat",
    age: 23,
    isOnline: true
};

But what happens when your app goes viral and you suddenly have ten thousand users? Manually typing out an object for every single person is impossible. You need a factory, a reusable blueprint that can stamp out new user profiles on demand, ensuring they all have the exact same structure.

In JavaScript, we build these blueprints using Constructor Functions, and we bring them to life using the new keyword.

In this blog, we will completely demystify object creation in JavaScript. We will understand what constructor functions are, the exact step-by-step magic the new keyword performs behind the scenes, how prototypes are linked, and what it means to be an "instance."

First, let’s understand the blueprint itself: the Constructor Function.

What are Constructor Functions?

A constructor function is essentially a regular JavaScript function, but it is written with a specific purpose: to build and initialize new objects. To distinguish constructor functions from normal functions, developers follow a strict naming convention. We always capitalize the first letter of a constructor function's name.

Here is a simple example of a constructor function for our social media app:

function User(name, age) {
    this.name = name;
    this.age = age;
    this.isOnline = false;
}

Looking at this code, you might be wondering: What is this? And how does this function actually give me an object? It doesn't even have a return statement!

If you try to call this function normally by writing User("Suprabhat", 23), it will actually fail to create an object. In strict mode, it will throw an error, and in non-strict mode, it will accidentally attach the name and age variables to your global browser window.

To make this factory work, we need a special tool. We need the new keyword.

What the new Keyword Does

The new keyword is an operator in JavaScript that completely changes how a function behaves. When you place new in front of a function call, you are telling JavaScript: "Do not run this like a normal function. Run this as an object factory."

Let's use it to create our user:

const myUser = new User("Suprabhat", 23);
console.log(myUser.name); // Output: Suprabhat

By simply adding new, the function magically creates an object, assigns the properties, and returns it to us. But there is no actual "magic" in programming. The new keyword executes a very specific, hardcoded sequence of events every single time it is used.

The Object Creation Process (Step-by-Step)

When you type new User("Suprabhat", 23), JavaScript immediately pauses your code and secretly performs four crucial steps behind the scenes. Understanding these four steps is one of the most important concepts for JavaScript technical interviews.

Step 1: A brand new, empty object is created. The very first thing new does is create a blank JavaScript object out of thin air: {}.

Step 2: The this keyword is pointed to the new object. In our User function, we wrote this.name = name;. Because we used new, JavaScript takes the empty object from Step 1 and binds the this keyword to it. So, when the function says this.name = "Suprabhat", it is actually saying: "Inside this new empty object, create a property called name and set it to Suprabhat."

Step 3: The new object is linked to the constructor's prototype. This is the most powerful step. JavaScript takes the newly created object and secretly links its hidden internal [[Prototype]] property to the User.prototype object. (We will explore why this is so important in the next section).

Step 4: The new object is automatically returned. Notice how our User function did not have a return keyword? Because we used new, JavaScript automatically says: "The function is done running, I will now return the object we just built." If we were to write out what new does manually, it looks conceptually like this:

// What 'new User("Suprabhat", 23)' does behind the scenes:
function User(name, age) {
    // Step 1 & 2: Secretly creates an object and points 'this' to it
    // this = {}; 

    // Step 3: Secretly links the prototype
    // Object.setPrototypeOf(this, User.prototype);

    this.name = name;
    this.age = age;
    this.isOnline = false;

    // Step 4: Secretly returns the object
    // return this;
}

How new Links Prototypes (And Why It Matters)

Imagine you want every user in your app to have a login() function. You could write it inside the constructor like this:

function User(name, age) {
    this.name = name;
    this.age = age;
    this.login = function() {
        console.log(this.name + " has logged in.");
    };
}

This works perfectly fine, but there is a massive hidden problem: Memory Waste.

If you create 10,000 users using new User(), JavaScript will create 10,000 completely separate copies of the login function. Every single object will carry its own heavy backpack with the exact same function inside. This will severely slow down your application.

This is where Step 3 of the new keyword (linking the prototype) saves the day.

Instead of putting the function inside the constructor, we put it on the constructor's Prototype. You can think of the prototype as a shared toolshed.

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

// We put the tool in the shared toolshed
User.prototype.login = function() {
    console.log(this.name + " has logged in.");
};

const userA = new User("Suprabhat", 23);
const userB = new User("Alex", 30);

userA.login(); // Output: Suprabhat has logged in.
userB.login(); // Output: Alex has logged in.

Because the new keyword automatically links userA and userB to the User.prototype (the shared toolshed), they can both use the login function whenever they want, even though they don't directly own it! We now have 10,000 users, but only one copy of the login function in memory.

Instances Created from Constructors

Once an object is successfully created by a constructor using the new keyword, we give it a special name. We do not just call it an "object" we call it an Instance.

In our example, userA is an instance of User.

JavaScript provides a very handy built-in operator called instanceof to verify where an object came from. This is incredibly useful when you are debugging complex code and need to know which blueprint created a specific object.

console.log(userA instanceof User); // Output: true
console.log(userA instanceof Array); // Output: false

Because userA was created by new User(), and its prototype is linked to User.prototype, JavaScript confidently tells us that true, this object is indeed an instance of your User blueprint.

Conclusion

Object creation is the beating heart of JavaScript. The new keyword might look like a simple, three-letter word, but it is responsible for the heavy lifting of modern web development.

By understanding that new creates an empty object, points the this keyword, links the shared prototype toolshed, and automatically returns the finished product, you are no longer just guessing how JavaScript works. You understand the exact mechanics behind the scenes.

Constructor functions and prototypes ensure that whether your application has one user or one million, your code remains clean, efficient, and highly scalable.