The new Keyword in JavaScript

JavaScript gives you multiple ways to create objects.

You can use object literals, classes, factory functions — but one of the most important and foundational ways is through constructor functions and the new keyword.

If you truly understand how new works internally, a lot of advanced concepts like prototypes, classes, inheritance, and even frameworks start making much more sense.

This article breaks down the new keyword step by step, in a way that connects the theory to how JavaScript actually behaves behind the scenes.

Why the new Keyword Exists

Before ES6 classes, JavaScript developers used constructor functions to create multiple objects with similar structure and behavior.

Instead of writing:

const user1 = { name: "Mahesh", age: 21 };
const user2 = { name: "Rahul", age: 22 };

We define a blueprint:

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

Now we can create multiple objects using:

const user1 = new User("Mahesh", 21);
const user2 = new User("Rahul", 22);

The keyword new is what makes this pattern work.

Without new, the function behaves like a normal function.

With new, it becomes a constructor call.

What the new Keyword Does

When you use new, JavaScript performs several steps automatically.

Understanding these steps is the key to mastering object creation.

Object Creation Process (Step by Step)

When you run:

const user = new User("Mahesh", 21);

JavaScript internally does the following:

Step 1: Create a New Empty Object

const obj = {};

Step 2: Link the Object to Prototype

obj.__proto__ = User.prototype;

This connects the new object to the constructor’s prototype.

Step 3: Bind this to the New Object

Inside the constructor:

this → obj

Step 4: Execute the Constructor Function

User.call(obj, "Mahesh", 21);

Properties get assigned:

obj.name = "Mahesh";
obj.age = 21;

Step 5: Return the Object

return obj;

This is what new does behind the scenes.

Constructor → Instance Creation Flow

Matches your clean vertical flow style.

Constructor Functions

A constructor function is just a normal function with a naming convention:

• Starts with a capital letter

• Used with new

Example:

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

Create instance:

const car1 = new Car("Tesla", "Model 3");

Now car1 is an instance of Car.

Instances Created from Constructors

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

const car1 = new Car("Tesla", "Model 3");
const car2 = new Car("BMW", "X5");

These are separate objects:

console.log(car1 === car2); // false

Each instance has:

• Its own data

• Shared prototype methods

How new Links Prototypes

This is where things get powerful.

Every constructor function has a prototype property.

Car.prototype.drive = function() {
  console.log("Driving...");
};

Now:

car1.drive(); // works
car2.drive(); // works

Why?

Because:

car1.__proto__ === Car.prototype

The instance does not own the method, it inherits it.

Prototype Linking Visual

Important Behavior of new

If Constructor Returns Nothing

Default behavior:

function Test() {
  this.value = 10;
}

const t = new Test();
console.log(t.value); // 10

If Constructor Returns an Object

It overrides the default:

function Test() {
  this.value = 10;
  return { value: 50 };
}

const t = new Test();
console.log(t.value); // 50

If Constructor Returns Primitive

Ignored:

function Test() {
  this.value = 10;
  return 100;
}

const t = new Test();
console.log(t.value); // 10

Common Beginner Mistakes

Forgetting new

const user = User("Mahesh", 21);

Problem:

• this becomes global (or undefined in strict mode)

• No object is returned properly

Always use new with constructor functions.

Using Arrow Functions as Constructors

const User = (name) => {
  this.name = name;
};

This does NOT work.

Arrow functions:

• Do not have this binding

• Cannot be used with new

Relation Between Constructor and Object

Think of constructor as a blueprint.

Think of object as a real-world instance.

Example:

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

const s1 = new Student("Mahesh");

Here:

• Student → blueprint

• s1 → actual object

Modern JavaScript Note

With ES6, we use classes:

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

But internally:

Classes still use constructor functions and new.

So understanding new is still very important.