The `new` Keyword in JavaScript
Unlocking Object Creation
In JavaScript, the easiest way to create an object is by using curly braces {}. This is called an Object Literal.
const user1 = { name: "Alia", age: 25 };
This is perfectly fine if you only need one or two users. But what if you are building a social media app and need to create 10,000 users? Typing out 10,000 object literals is not an option.
We need a blueprint. We need a factory that can stamp out user objects on demand. In JavaScript, we achieve this using Constructor Functions combined with the magical new keyword.
Let’s lift the hood and see exactly what new does behind the scenes.
What the new keyword does (The 4 Steps)
When you place the word new in front of a function call, it completely changes how the function executes. It performs four distinct, automatic steps under the hood.
If we write:
const myUser = new User("Alia", 25);
Here is exactly what JavaScript does:
Creates an empty object: It instantly creates a brand new, empty object {}.
Links the Prototype: It secretly links this new object to the constructor function's prototype (more on this below).
Binds this: It points the this keyword inside the function to the newly created empty object. So this.name = "Alia" actually means [NewObject].name = "Alia".
Returns the object: It automatically returns the newly populated object from the function, even if you didn't write a return statement!
Explicit return overrides step 4 only for objects. If you return a primitive (string, number) from a constructor, it's ignored and the new instance is returned as normal. If you return an object, that object replaces the instance entirely.
Constructor functions
A constructor function is just a regular JavaScript function. However, by convention, we write its name starting with a Capital Letter to signal to other developers: "Hey, this function is meant to be used as a blueprint to build objects!"
Here is a simple constructor function for a User:
function User(username, age) {
this.name = username;
this.age = age;
}
If you call this function normally (User("Bikash", 30)), it will cause chaos. Because it’s a normal function call, this will point to the global window object, and you will accidentally create global variables!
To make this blueprint work correctly, we must call it with the new keyword.
Calling a constructor without new is a silent bug. Without new, this inside the function refers to the global object (or is undefined in strict mode). Properties get assigned to the wrong place and the function returns undefined instead of an object.
How new links prototypes (The Secret Power)
Remember Step 2 from earlier? "Links to the constructor's prototype." This is the true superpower of the new keyword.
If we want every user to have a login() method, we could put it inside the constructor:
function User(username) {
this.name = username;
this.login = function() { console.log("Logged in!"); } // Bad practice
}
The Problem: If we create 10,000 users, JavaScript will create 10,000 copies of that exact same login function in memory. Your app will become bloated and slow.
The Solution: We attach the method to the Constructor's Prototype.
function User(username) {
this.name = username;
}
// Attach the method to the prototype ONCE
User.prototype.login = function() {
console.log(`
${this.name} has logged in!`);};
Because the new keyword secretly linked our objects to User.prototype (Step 2), any instance we create can "look up" and use that single login method!
Memory saved! 10,000 users, but only 1 copy of the login function exists.
Instances created from constructors
The objects that are spat out by the new keyword are called Instances.
// Creating instances using the 'new' keyword
const user1 = new User("Alia", 25);
const user2 = new User("Bikash", 30);
console.log(user1.name); // Outputs: "Alia"
console.log(user2.name); // Outputs: "Bikash"
Both user1 and user2 are unique, independent objects. However, they share the same structure because they were built from the same User blueprint.
Practical Assignment
As part of my web development cohort, here is my practical implementation demonstrating Constructor Functions, the new keyword, and Prototype linking. Feel free to run this in your browser console!
// Define the Constructor Function (The Blueprint)
function SmartPhone(brand, model, batteryLife) {
// 'this' refers to the new object being created
this.brand = brand;
this.model = model;
this.batteryLife = batteryLife;
}
// Add a shared method to the Prototype to save memory
SmartPhone.prototype.checkBattery = function() {
console.log(`The \({this.brand} \){this.model} has ${this.batteryLife}% battery remaining.`);
};
// Create INSTANCES using the 'new' keyword
const phone1 = new SmartPhone("Apple", "iPhone 14", 85);
const phone2 = new SmartPhone("Samsung", "Galaxy S23", 42);
// Test the prototype methods
console.log("--- Phone Status ---");
phone1.checkBattery();
// Outputs: The Apple iPhone 14 has 85% battery remaining.
phone2.checkBattery();
// Outputs: The Samsung Galaxy S23 has 42% battery remaining.
E:\Hitesh_Web_Dev_2026\blog_folder\blog_assignment_codes>node 16assign.js
--- Phone Status ---
The Apple iPhone 14 has 85% battery remaining.
The Samsung Galaxy S23 has 42% battery remaining.
Conclusion
Before modern JavaScript introduced the class keyword (which is just syntactic sugar over this exact process), understanding constructors and prototypes was the only way to do Object-Oriented Programming in JS.
Whenever you see the new keyword, just remember the 4-step magic trick: It creates a blank object, links it to the prototype, binds this to it, and hands it back to you!
ES6 class syntax doesn't change any of this it's the same four steps under the hood. The class body is constructor syntax, class methods go on the prototype, and new still drives the whole process. Understanding the mechanism makes the sugar much easier to reason about.
