How JavaScript creates objects from blueprints — and what actually happens behind the scenes.
At some point in your JavaScript journey, you'll stop creating one-off objects and start thinking: "I need to create many objects that all have the same structure." Ten users. Fifty products. A hundred tasks. Each one has the same properties — name, email, role — but with different values.
You could write each one by hand:
const user1 = { name: "Pratham", role: "admin" };
const user2 = { name: "Arjun", role: "editor" };
const user3 = { name: "Priya", role: "viewer" };
// ... 97 more?
That doesn't scale. What you actually want is a blueprint — a template that says "every user has a name and a role" — and then a way to stamp out new objects from that blueprint. That's exactly what constructor functions and the new keyword give you.
This concept clicked for me during the ChaiCode Web Dev Cohort 2026, and it's one of those fundamentals that connects directly to how classes, React components, and object-oriented patterns work. Let me walk you through it.
What Does the new Keyword Do?
The new keyword creates a new object from a constructor function. It automates a bunch of steps that you'd otherwise have to do manually.
In one sentence: new takes a blueprint (constructor function) and produces an instance (a new object) based on that blueprint.
Think of it like a cookie cutter. The constructor function is the cutter (the shape). Every time you press it into dough (use new), you get a new cookie (a new object) — same shape, but each one is its own cookie.
Constructor Function (blueprint)
↓
new keyword
↓
New Object (instance)
Constructor Functions — The Blueprint
A constructor function is a regular function that's designed to be called with new. By convention, constructor function names start with a capital letter to distinguish them from regular functions.
Basic Example
function User(name, role) {
this.name = name;
this.role = role;
}
const user1 = new User("Pratham", "admin");
const user2 = new User("Arjun", "editor");
const user3 = new User("Priya", "viewer");
console.log(user1); // User { name: "Pratham", role: "admin" }
console.log(user2); // User { name: "Arjun", role: "editor" }
console.log(user3); // User { name: "Priya", role: "viewer" }
Three objects, all with the same structure, created from one blueprint. Each one is its own independent object — changing user1.name doesn't affect user2.
Adding Methods to the Constructor
function User(name, email) {
this.name = name;
this.email = email;
this.greet = function () {
console.log(`Hi, I'm ${this.name} (${this.email})`);
};
}
const pratham = new User("Pratham", "pratham@prathamdev.in");
pratham.greet(); // "Hi, I'm Pratham (pratham@prathamdev.in)"
const arjun = new User("Arjun", "arjun@example.com");
arjun.greet(); // "Hi, I'm Arjun (arjun@example.com)"
Each instance gets its own name, email, and greet method. The constructor function acts as a factory — you feed it values, and it produces fully formed objects.
The Object Creation Process — Step by Step
This is the part that most tutorials gloss over, but understanding what new actually does behind the scenes is what separates surface-level knowledge from real understanding.
When you write new User("Pratham", "admin"), JavaScript does four things automatically:
Step 1: Create a New Empty Object
// JavaScript internally does:
const obj = {};
A brand-new, empty object is created. This is the object that will eventually be returned.
Step 2: Link the Object's Prototype
// JavaScript internally does:
obj.__proto__ = User.prototype;
The new object's internal prototype is linked to the constructor function's prototype property. This is how the object inherits shared methods (more on this shortly).
Step 3: Call the Constructor with this = New Object
// JavaScript internally does:
User.call(obj, "Pratham", "admin");
The constructor function runs, but this inside it refers to the new empty object. So this.name = name becomes obj.name = "Pratham", and the object gets populated with properties.
Step 4: Return the New Object
// JavaScript internally does:
return obj;
Unless the constructor explicitly returns a different object, JavaScript automatically returns the newly created and populated object.
The Complete Picture
new User("Pratham", "admin")
Step 1: {} (empty object created)
↓
Step 2: {}.__proto__ → User.prototype (linked)
↓
Step 3: User runs with this = {}
this.name = "Pratham"
this.role = "admin"
Now: { name: "Pratham", role: "admin" }
↓
Step 4: Return { name: "Pratham", role: "admin" }
Result: user1 = { name: "Pratham", role: "admin" }
Simulating new Manually
To really drive this home, here's what new does — written as regular code:
function fakeNew(Constructor, ...args) {
// Step 1: Create empty object
const obj = {};
// Step 2: Link prototype
Object.setPrototypeOf(obj, Constructor.prototype);
// Step 3: Call constructor with this = obj
Constructor.apply(obj, args);
// Step 4: Return the object
return obj;
}
function User(name, role) {
this.name = name;
this.role = role;
}
const user = fakeNew(User, "Pratham", "admin");
console.log(user); // { name: "Pratham", role: "admin" }
console.log(user instanceof User); // true ✅
That fakeNew function does exactly what new does. Understanding these four steps means you truly understand new.
Constructor → Instance Creation Flow
┌──────────────────────────────────────────────────────────┐
│ Constructor Function │
│ │
│ function Product(name, price) { │
│ this.name = name; │
│ this.price = price; │
│ } │
└────────────────────┬─────────────────────────────────────┘
│
┌───────────┼───────────┐
↓ ↓ ↓
new Product new Product new Product
("Laptop", ("Phone", ("Headphones",
75000) 25000) 3000)
↓ ↓ ↓
┌────────────┐ ┌────────────┐ ┌─────────────┐
│ Instance │ │ Instance │ │ Instance │
│ │ │ │ │ │
│ name: │ │ name: │ │ name: │
│ "Laptop" │ │ "Phone" │ │ "Headphones" │
│ price: │ │ price: │ │ price: │
│ 75000 │ │ 25000 │ │ 3000 │
└────────────┘ └────────────┘ └─────────────┘
One blueprint → many instances.
Each instance is independent.
How new Links Prototypes
Here's where things get powerful. Remember Step 2 — linking the prototype? This is how instances share methods without duplicating them.
The Problem Without Prototypes
function User(name) {
this.name = name;
this.greet = function () {
console.log(`Hi, I'm ${this.name}`);
};
}
const user1 = new User("Pratham");
const user2 = new User("Arjun");
console.log(user1.greet === user2.greet); // false!
Each instance gets its own copy of the greet function. If you create 1,000 users, that's 1,000 copies of the same function in memory. Wasteful.
The Solution: Prototype Methods
function User(name) {
this.name = name;
}
// Shared method — lives on the prototype, not on each instance
User.prototype.greet = function () {
console.log(`Hi, I'm ${this.name}`);
};
const user1 = new User("Pratham");
const user2 = new User("Arjun");
user1.greet(); // "Hi, I'm Pratham"
user2.greet(); // "Hi, I'm Arjun"
console.log(user1.greet === user2.greet); // true! ✅ Same function in memory
Both instances use the same greet function from User.prototype. One copy in memory, shared by all instances.
Prototype Linking Visual
User.prototype
┌─────────────────────┐
│ greet: function() │ ← shared method (one copy)
└──────────┬──────────┘
│
┌──────────────┼──────────────┐
↓ ↓ ↓
┌────────────┐ ┌────────────┐ ┌────────────┐
│ user1 │ │ user2 │ │ user3 │
│ │ │ │ │ │
│ name: │ │ name: │ │ name: │
│ "Pratham" │ │ "Arjun" │ │ "Priya" │
│ │ │ │ │ │
│ __proto__──┤ │ __proto__──┤ │ __proto__──┤
│ → User │ │ → User │ │ → User │
│ .prototype│ │ .prototype│ │ .prototype│
└────────────┘ └────────────┘ └────────────┘
Each instance has its own "name" (data).
All instances SHARE "greet" via the prototype chain.
When you call user1.greet(), JavaScript:
- Looks for
greetonuser1→ not found - Follows
__proto__toUser.prototype→ found! - Runs it with
this=user1
This is the prototype chain — JavaScript's inheritance mechanism.
Instances Created from Constructors
Every object created with new is an instance of its constructor. You can verify this with instanceof:
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
const myCar = new Car("Toyota", "Camry");
const myBike = { brand: "Honda", model: "Activa" };
console.log(myCar instanceof Car); // true ✅
console.log(myBike instanceof Car); // false ❌
myCar was created with new Car(), so it's an instance of Car. myBike is a plain object literal — no constructor involved.
Multiple Instances, Independent Data
function Task(title, priority) {
this.title = title;
this.priority = priority;
this.completed = false;
}
Task.prototype.complete = function () {
this.completed = true;
console.log(`✅ "${this.title}" marked as complete.`);
};
const task1 = new Task("Learn JavaScript", "high");
const task2 = new Task("Write article", "medium");
const task3 = new Task("Push to GitHub", "low");
task1.complete();
// ✅ "Learn JavaScript" marked as complete.
console.log(task1.completed); // true
console.log(task2.completed); // false — independent!
console.log(task3.completed); // false — independent!
Each instance has its own data, but shares methods through the prototype. This is the foundation of object-oriented programming in JavaScript.
What Happens Without new?
This is a common mistake — calling a constructor function without new:
function User(name) {
this.name = name;
}
// With new — works correctly
const user1 = new User("Pratham");
console.log(user1); // User { name: "Pratham" } ✅
// Without new — BAD!
const user2 = User("Arjun");
console.log(user2); // undefined ❌
console.log(window.name); // "Arjun" — accidentally polluted global scope!
Without new:
- No new object is created
-
thisbecomes the global object - Properties get attached to
window(in browsers) - The function returns
undefined(no explicit return)
That's why the capital-letter convention exists — it signals "use new with this function." And that's why ES6 classes (which we'll cover later) enforce new automatically.
Let's Practice: Hands-On Assignment
Part 1: Create a Constructor Function
function Student(name, age, course) {
this.name = name;
this.age = age;
this.course = course;
}
Student.prototype.introduce = function () {
console.log(`I'm ${this.name}, ${this.age}, studying ${this.course}.`);
};
Part 2: Create Multiple Instances
const s1 = new Student("Pratham", 22, "Web Dev Cohort 2026");
const s2 = new Student("Arjun", 21, "Data Science");
const s3 = new Student("Priya", 23, "Machine Learning");
s1.introduce(); // "I'm Pratham, 22, studying Web Dev Cohort 2026."
s2.introduce(); // "I'm Arjun, 21, studying Data Science."
s3.introduce(); // "I'm Priya, 23, studying Machine Learning."
Part 3: Verify Instances and Shared Methods
console.log(s1 instanceof Student); // true
console.log(s2 instanceof Student); // true
// All instances share the same introduce method
console.log(s1.introduce === s2.introduce); // true ✅
console.log(s2.introduce === s3.introduce); // true ✅
Part 4: Add More Prototype Methods
Student.prototype.changeCourse = function (newCourse) {
const old = this.course;
this.course = newCourse;
console.log(`${this.name} switched from ${old} to ${newCourse}.`);
};
s1.changeCourse("Full-Stack Development");
// "Pratham switched from Web Dev Cohort 2026 to Full-Stack Development."
s1.introduce();
// "I'm Pratham, 22, studying Full-Stack Development."
Key Takeaways
- The
newkeyword creates a new object from a constructor function. It automates object creation, prototype linking, and returning. - Constructor functions are blueprints for creating multiple objects with the same structure. Name them with a capital letter by convention.
-
newperforms four steps: create empty object → link prototype → run constructor withthis= new object → return the object. - Prototype methods are shared across all instances — one copy in memory instead of one per object. This is efficient and is the basis of JavaScript's inheritance.
- Every object created with
newis an instance of its constructor, verifiable withinstanceof.
Wrapping Up
The new keyword is one of those foundational pieces that connects everything in JavaScript's object model. Constructor functions give you blueprints. new gives you instances. Prototypes give you shared behavior. Together, they form the basis of object-oriented JavaScript — and they're exactly what ES6 classes are built on top of (classes are just syntactic sugar over constructors and prototypes).
I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and understanding new was the moment prototypes stopped being abstract theory and became something I could actually use. If you're building towards classes and React, this is essential groundwork.
Connect with me on LinkedIn or visit PrathamDEV.in. More articles on the way.
Happy coding! 🚀
Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode