Search for a command to run...
Uncover the behind-the-scenes magic of JavaScript's new keyword and learn exactly how constructor functions build objects from scratch.
No comments yet. Be the first to comment.
These are the assignments or knowledge dumps I decide to write for the "Chai aur Code's web Dev Cohort 2026"
Tired of writing object.property over and over? Learn how to extract data from arrays and objects the modern, clean way.
RAG helps LLMs answer questions using your own data, but it doesn't guarantee correct answers. Here's how the pipeline works and where it commonly breaks down.
Imagine asking an AI, "Write a blog," versus "Act as an SEO expert and write a 1,000-word blog on AI safety formatted in markdown." The difference in the resulting output is night and day. A prompt is
Spotify and Apple Music make it incredibly easy to showcase your live listening habits on your website. YouTube Music? Not so much. After doing some setup you can do an API call and fetch your account
Arthur C. Clarke's famous third law: "Any sufficiently advanced technology is indistinguishable from magic" perfectly captures how the pace of human innovation works. From carrying supercomputers in o
Why HTTP is amnesiac, the difference between transport and state, and how to choose the right auth strategy for your Node.js app.
In JavaScript, objects are the foundation of almost everything we do. If you want to group related data and actions together, you create an object.
Creating a single object is easy enough using curly braces {}. But what if you are building a game and need to create 100 different players? Manually typing out 100 objects with the exact same structure would be a massive waste of time and highly prone to errors.
To solve this, developers use Constructor Functions paired with a very special tool: the new keyword.
To the untrained eye, new just looks like a minor syntax requirement. But under the hood, it acts as an invisible factory, executing a specific 4-step process to generate perfect, memory-efficient objects. Here is exactly how it works.
Before we look at the new keyword, we need a blueprint to build our objects from. In JavaScript (prior to ES6 Classes), we do this using a Constructor Function.
A constructor function is just a regular JavaScript function, but with two important conventions:
It is capitalized: We name it with a capital letter (like Player instead of player) to signal to other developers that this function is a blueprint, not a regular function.
It uses this: It uses the this keyword to assign properties.
// The Constructor Function (The Blueprint)
function Player(username, level) {
this.username = username;
this.level = level;
}
If we just run Player("Hero123", 10) normally, it won't work the way we expect. It will just act like a regular function, and this will point to the global window object.
To turn this standard function into an object-building factory, we must call it with the new keyword.
// Instantiating a new object using 'new'
const playerOne = new Player("Hero123", 10);
console.log(playerOne.username); // Output: Hero123
When you type the word new in front of a function call, JavaScript secretly hijacks the function execution and performs four hidden steps behind the scenes.
Here is exactly what the new keyword does:
The very first thing new does is generate a blank object out of thin air: {}.
this to the new object.Remember how this refers to the "caller" of a function? The new keyword forces the this context inside the constructor function to point directly to the newly created empty object. (It translates this.username = username to newEmptyObject.username = username).
This is the most powerful step. The new keyword connects the hidden __proto__ property of the new object to the prototype object of the constructor function. (We will explore why this matters in a moment).
Finally, new automatically returns the newly built object out of the function, without you ever having to write the return keyword.
Step 1: let newObj = {};
Step 2: this = newObj; -> { username: "Hero123", level: 10 }
Step 3: newObj.__proto__ = Player.prototype;
Step 4: return newObj;[ Result: playerOne holds the completed object! ]
When an object is created using a constructor function and the new keyword, we call that object an Instance.
const playerOne = new Player("Hero123", 10);
const playerTwo = new Player("Mage99", 50);
In this example, playerOne and playerTwo are instances of Player. They share the exact same structural blueprint, but they hold their own unique, independent data. Modifying playerOne will not affect playerTwo.
new Links Prototypes (And Why It Matters)Let’s go back to Step 3 of the creation process: linking the prototype. Why is this so important?
Imagine you want every player to have a login() method. You could put it directly inside the constructor function:
function Player(username, level) {
this.username = username;
this.level = level;
// BAD: Creating a new function for every single instance
this.login = function() {
console.log(`${this.username} has logged in.`);
};
}
If you create 1,000 players, JavaScript will create 1,000 duplicate copies of the login function, eating up massive amounts of memory.
Instead, we can put the login function on the Constructor's Prototype:
function Player(username, level) {
this.username = username;
this.level = level;
}
// GOOD: Attaching the method to the prototype once
Player.prototype.login = function() {
console.log(`${this.username} has logged in.`);
};
Because the new keyword linked our instances to Player.prototype in Step 3, our objects can access the login function even though it isn't physically stored inside them!
const playerOne = new Player("Hero123", 10);
playerOne.login(); // Output: Hero123 has logged in.
When playerOne tries to use .login(), JavaScript looks inside playerOne. It doesn't find it. But because of the new keyword's magic, JavaScript follows the prototype link, finds the method on the blueprint, and executes it perfectly. 1,000 players can now share a single copy of the function.
The new keyword is much more than syntactic sugar; it is the engine that drives object-oriented programming in classic JavaScript.
Whenever you invoke a function with new, remember the 4 invisible steps it takes:
Creates a new empty object.
Binds this to the new object so properties can be added.
Links the object to the constructor's prototype to allow method sharing.
Returns the finished object automatically.
Understanding this process bridges the gap between basic JavaScript syntax and true software engineering. The next time you create an instance, you will know exactly what is happening behind the scenes!