JavaScript new Keyword Explained: Constructor Functions, Prototypes & Object Creation

JavaScript is a powerful language, and one of its most important concepts in object-oriented programming is the new keyword.

If you've ever wondered how objects are created behind the scenes, this guide will give you a clear, step-by-step understanding of how new works.

---

📌 What is the new Keyword?

The new keyword in JavaScript is used to create an instance of an object from a constructor function.

👉 In simple terms: It helps you create multiple objects using a blueprint.

---

🧱 Constructor Functions

A constructor function is a regular function used to create objects.

Example:

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

Using new:

const user1 = new Person("Vishal", 20);
const user2 = new Person("Rahul", 22);

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

Output:

Person { name: "Vishal", age: 20 }
Person { name: "Rahul", age: 22 }

👉 Each object is a separate instance created from the same constructor.

---

⚙️ What Happens When You Use new?

When you write:

const user = new Person("Vishal", 20);

JavaScript performs 4 hidden steps:

---

🔹 Step 1: Create an empty object

const obj = {};

---

🔹 Step 2: Link the object to prototype

obj.__proto__ = Person.prototype;

---

🔹 Step 3: Bind this to the new object

Person.call(obj, "Vishal", 20);

---

🔹 Step 4: Return the object

return obj;

---

👉 Final result:

const user = {
    name: "Vishal",
    age: 20
};

---

🔄 Object Creation Flow

Constructor Function 
        ↓
     new keyword
        ↓
  Empty Object {}
        ↓
  Prototype Linked
        ↓
   this Binding
        ↓
   Final Object Returned

---

🔗 How new Links Prototypes

Every constructor function has a prototype property.

Example:

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

Person.prototype.greet = function () {
    console.log("Hello, " + this.name);
};

const user = new Person("Vishal");
user.greet(); // Hello, Vishal

👉 This works because:

user.__proto__ === Person.prototype

---

🧬 Prototype Chain

user → Person.prototype → Object.prototype → null

👉 This is called the prototype chain.

---

👥 Instances Created from Constructors

Each time you use new, a new instance is created.

Example:

const p1 = new Person("A");
const p2 = new Person("B");

console.log(p1 === p2); // false

👉 Even though both use the same constructor, they are different objects.

---

❌ What Happens Without new?

const user = Person("Vishal", 20);
console.log(user); // undefined

👉 Problem:

• this does not refer to a new object

• In strict mode, it becomes undefined

---

✅ Best Practice

Use new with constructor functions or prefer modern classes:

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

---

🧩 Real-World Analogy

Think of a constructor as a blueprint of a house 🏠

• Constructor → Blueprint

• new → Building the house

• Instance → Actual house

---

🔥 Final Summary

✔ new creates a new object ✔ Links it to prototype ✔ Binds this ✔ Returns the object

---

🎯 Conclusion

Understanding the new keyword is essential for mastering JavaScript’s object system.

Once you understand:

• Constructor functions

• Prototype linking

• Instance creation

👉 You gain deep insight into how JavaScript works internally.

---