The `new` Keyword in JavaScript — What Actually Happens Under the Hood

You've used new before. But do you know what JavaScript is actually doing when you type it?

Let's break it down — step by step, no fluff.

Why Does new Even Exist?

JavaScript is an object-based language. Almost everything is an object — arrays, functions, even dates. So naturally, you need a way to create new objects in a structured, reusable way.

That's exactly what new does. It lets you use a constructor function as a blueprint to stamp out fresh objects on demand — the same way a factory uses a mold to produce identical products.

---

Constructor Functions — The Blueprint

Before ES6 classes became popular, JavaScript developers used constructor functions. They look like regular functions, but by convention, their name starts with a capital letter.

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

This is just a plain function. By itself, it does nothing special. The magic happens when you call it with new.

const nawazish = new Person("Nawazish", 21);

console.log(nawazish.name); // "Nawazish"
console.log(nawazish.age);  // 21

You just created a brand new object using a function as a template. That's the power of new.

---

What new Actually Does — Step by Step

When you write new Person("Nawazish", 21), JavaScript silently does four things behind the scenes:

Step 1 — Creates a blank object

const obj = {};

A fresh, empty object is born.

Step 2 — Links the object's prototype

obj.__proto__ = Person.prototype;

The new object is connected to Person.prototype so it can inherit methods from it.

Step 3 — Runs the constructor with this = new object

Person.call(obj, "Nawazish", 21);
// Inside the function:
// this.name = "Nawazish"
// this.age  = 21

The constructor function runs, and this points to the blank object we just created. So all the properties get attached to it.

Step 4 — Returns the object

If the constructor doesn't explicitly return an object, new automatically returns obj for you.

In plain English: new creates an object, wires up its prototype, runs the setup function, and hands you back the result.

---

Visualizing the Flow

new Person("Nawazish", 21)
         │
         ▼
  ┌─────────────────────┐
  │   1. Create {}      │
  └────────┬────────────┘
           │
           ▼
  ┌──────────────────────────────┐
  │  2. Link __proto__ to        │
  │     Person.prototype         │
  └────────┬─────────────────────┘
           │
           ▼
  ┌──────────────────────────────┐
  │  3. Run Person() with        │
  │     this = new object        │
  │     → this.name = "Nawazish" │
  │     → this.age  = 21         │
  └────────┬─────────────────────┘
           │
           ▼
  ┌──────────────────────────────┐
  │  4. Return the object        │
  └──────────────────────────────┘
           │
           ▼
  nawazish = { name: "Nawazish", age: 21 }

---

What Is prototype and Why Does It Matter?

Every function in JavaScript has a .prototype property. When you add methods to it, all instances created from that function share those methods — without each object carrying its own copy.

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

// Add a method to the prototype
Person.prototype.greet = function () {
  return `Hi, I'm ${this.name}!`;
};

const nawazish = new Person("Nawazish", 21);
const aryan    = new Person("Aryan", 22);

console.log(nawazish.greet()); // "Hi, I'm Nawazish!"
console.log(aryan.greet());    // "Hi, I'm Aryan!"

Both nawazish and aryan can call .greet() — but there is only one copy of that function in memory, sitting on Person.prototype. This is memory-efficient and is the foundation of how JavaScript does inheritance.

---

Prototype Linking — The Visual

        Person.prototype
       ┌──────────────────────┐
       │  greet: function()   │
       └──────────┬───────────┘
                  │
        (linked via __proto__)
                  │
       ┌──────────┴──────────────────────┐
       │                                 │
   nawazish                           aryan
{ name: "Nawazish", age: 21 }   { name: "Aryan", age: 22 }

When you call nawazish.greet(), JavaScript first looks on the nawazish object itself. It doesn't find greet there. So it climbs up the prototype chain to Person.prototype, finds greet, and runs it.

This lookup mechanism is called the prototype chain — JavaScript's way of doing inheritance.

---

What Happens If You Forget new?

This is one of the most common and silent bugs in JavaScript:

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

const p = Person("Nawazish"); // ← forgot new!

console.log(p);            // undefined
console.log(window.name);  // "Nawazish" — polluted the global scope!

Without new, there is no new object being created. So this inside the function refers to the global object (window in browsers, global in Node.js). Your properties get silently dumped onto the global scope, which can cause very hard-to-debug issues.

Simple rule: Always use new with constructor functions. Or better yet, switch to ES6 classes — they throw a clear error if you forget new.

---

ES6 Classes — new Still Works the Same Way

ES6 classes are syntactic sugar over constructor functions. Under the hood, new performs the exact same four steps.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hi, I'm ${this.name}!`;
  }
}

const nawazish = new Person("Nawazish", 21);
console.log(nawazish.greet()); // "Hi, I'm Nawazish!"

The syntax is cleaner, the prototype mechanics are identical. Classes also enforce new — if you accidentally call a class without it, JavaScript throws a TypeError immediately. That's a much safer default.

---

Quick Recap

Step	What happens
new is called	A blank {} is created
Prototype linked	obj.__proto__ = Constructor.prototype
Constructor runs	this points to the new object; properties are assigned
Object returned	You get the fully built instance back

---

Key Takeaways

• new is how you create instances from constructor functions or classes

• It automatically handles object creation, prototype linking, and returning the result

• Methods placed on .prototype are shared across all instances — memory efficient

• Forgetting new is a silent bug — this becomes the global object

• ES6 class syntax uses the exact same mechanics under the hood, just with a safer, cleaner API

---

Every time you write new Something() from now on, you'll know exactly what JavaScript is doing behind the scenes.

If this helped you, drop a reaction or a comment. I'm writing through the entire JavaScript fundamentals series as part of my learning in public journey — follow along if you're on the same path.