Skip to main content

The new Keyword in JavaScript

Updated 6 min readMarkdown

JavaScript without new is like assembling IKEA furniture without reading the manual. Technically possible. Emotionally dangerous.

A lot of beginners use new without understanding what it actually does behind the scenes. They know:

const person = new Person();

But internally, JavaScript performs multiple hidden steps like a tiny factory worker building your object.

Let’s break it down properly.


What Does the new Keyword Do?

The new keyword is used to create an object from a constructor function.

When you write:

const user = new User("Gagan");

JavaScript automatically performs 4 major steps:

  1. Creates a brand new empty object {}

  2. Links that object to the constructor's prototype

  3. Executes the constructor function with this pointing to the new object

  4. Returns the newly created object

Most developers memorize syntax. Very few understand the actual execution pipeline.


Constructor Functions

Before ES6 classes existed, JavaScript mainly used constructor functions to create objects.

Example:

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

Now create instances:

const user1 = new User("Gagan", 19);
const user2 = new User("Rahul", 20);

console.log(user1);
console.log(user2);

Output:

User { name: 'Gagan', age: 19 }
User { name: 'Rahul', age: 20 }

Why Constructor Functions Exist

Without constructors, you would manually create objects repeatedly:

const user1 = {
    name: "Gagan",
    age: 19
};

const user2 = {
    name: "Rahul",
    age: 20
};

Now imagine doing this hundreds or thousands of times.

Constructor functions solve this by acting like reusable blueprints for object creation.


Step-by-Step: What Happens Internally?

Consider this code:

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

const car1 = new Car("BMW");

Internally, JavaScript roughly performs the following operations.


Step 1: Create an Empty Object

const obj = {};

JavaScript connects the new object to Car.prototype.

Conceptually:

obj.__proto__ = Car.prototype;

This allows the object to access shared methods.


Step 3: Bind this

The constructor function executes with this = obj

Car.call(obj, "BMW");

Inside the constructor:

this.brand = brand;

becomes:

obj.brand = "BMW";

Step 4: Return the Object

Finally:

return obj;

So this:

const car1 = new Car("BMW");

is approximately equivalent to:

const obj = {};
obj.__proto__ = Car.prototype;

Car.call(obj, "BMW");

return obj;

That’s the actual machinery behind new.


Prototype Linking

Every constructor function automatically gets a prototype object.

Example:

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

User.prototype.sayHello = function () {
    console.log(`Hello, I am ${this.name}`);
};

Now:

const user1 = new User("Gagan");

user1.sayHello();

Output:

Hello, I am Gagan

But user1 itself does not directly contain sayHello.

So how does it access the method?

Because of prototype linking.


How Prototype Lookup Works

When JavaScript cannot find a property directly on an object:

user1.sayHello

it checks:

  1. Inside user1

  2. Then inside user1.__proto__

  3. Which points to User.prototype

That’s why the method works.


Constructor → Instance Relationship

Check this:

console.log(user1 instanceof User);

Output:

true

Because:

user1.__proto__ === User.prototype

This prototype chain is what connects instances to constructors.


Shared Methods vs Duplicate Methods

Bad approach:

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

    this.greet = function () {
        console.log("Hello");
    };
}

Every object gets its own copy of greet.

If you create 10,000 users, you create 10,000 duplicate functions.

Better approach:

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

User.prototype.greet = function () {
    console.log("Hello");
};

Now all objects share one method through the prototype.

Efficient and scalable.


What Happens If You Forget new?

This is where beginners accidentally create chaos.

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

const user1 = User("Gagan");

Without new:

  • No object gets created

  • this may point to the global object

  • Unexpected bugs can happen

In strict mode:

"use strict";

JavaScript throws:

TypeError

because this becomes undefined.


Modern Alternative: Classes

ES6 introduced classes:

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

    greet() {
        console.log(`Hello ${this.name}`);
    }
}

Usage:

const user1 = new User("Gagan");

But internally, classes still use prototypes.

class is mostly cleaner syntax over constructor functions and prototype-based inheritance.

The engine still performs the same fundamental operations.


Constructor → Instance Creation Flow

new User("Gagan")
        ↓
Create empty object {}
        ↓
Link object to User.prototype
        ↓
Bind this to object
        ↓
Execute constructor
        ↓
Return object

Prototype Linking Visual

user1
  ↓
__proto__
  ↓
User.prototype
  ↓
Object.prototype
  ↓
null

This chain is the foundation of JavaScript inheritance.


Final Thoughts

The new keyword is not just object creation syntax.

It combines:

  • object creation

  • prototype linking

  • context binding

  • automatic object return

all inside one keyword.

Once you understand this process, JavaScript’s object system starts making logical sense instead of feeling random.

And suddenly concepts like:

prototype
__proto__
instanceof
constructor functions
prototype chain

stop looking like ancient cursed artifacts from Stack Overflow.


Specification Section

Core Concepts to Master

Concept Meaning
Constructor Function Function used to create objects
new Keyword Automates object creation
this Refers to the current object instance
Prototype Shared object containing methods
Instance Object created from constructor
Prototype Chain Lookup system for properties and methods

Memory Optimization Insight

This:

this.greet = function(){}

creates a new function for every object.

This:

User.prototype.greet = function(){}

creates one shared function.

Huge difference at scale.


Real Mental Model

Whenever you see:

new Something()

mentally translate it to:

Create object → Attach prototype → Run constructor → Return object

That’s the actual pipeline.

Not magic. Just hidden automation.


Interview-Level Questions You Should Now Understand

  • Difference between constructor functions and classes

  • Difference between prototype and __proto__

  • How instanceof works

  • Why methods should live on prototypes

  • What happens if new is omitted

  • How inheritance works internally

If these concepts still feel confusing, revisit prototype linking. That is the central nervous system of JavaScript objects.

1 view

No comments yet. Be the first to comment.