Search for a command to run...
Understanding the new keyword, constructor functions, and how objects are created
No comments yet. Be the first to comment.
Expo Router and React Navigation for scalable React Native apps - auth flows, layouts, and developer workflow.
Understanding how production React Native apps scale using better architecture and Expo Router.
Understanding string polyfills, built-in methods, and interview logic in JavaScript.
Understanding file storage, static serving, and upload handling in Express.js.
Understanding Express routing, requests, responses, and server handling basics.
f you’ve been writing JavaScript for a bit, you’ve definitely seen the new keyword. At first glance, it feels simple, you write new something and you get an object. But internally, more things are happening than just creating an object. So the new keyword that we use in JavaScript is basically used to create a new object. In simple terms, yes, it creates a new object, but how exactly does that happen internally is what actually matters here.
When we use new before a function, JavaScript performs multiple steps behind the scenes in one go. It creates a new empty object, then it links this object to the prototype of the constructor function, after that it calls the constructor function and sets this to point to that new object, then it assigns properties to this, and finally it returns that object automatically. So the important idea here is not that a new prototype is created, but that the new object gets linked to an already existing prototype, and that is what enables sharing and inheritance.
A constructor function is just a normal function, but the difference is that we use it with new to create objects. This pattern is widely used to create multiple objects with similar structure. Instead of manually creating objects again and again, we define a constructor once and reuse it.
function Cricketer(name, role) {
this.name = name;
this.role = role;
this.introduce = function () {
console.log("Hi, I am " + this.name + " and I am a " + this.role);
};
}
const player1 = new Cricketer("Virat Kohli", "Batter");
const player2 = new Cricketer("Jasprit Bumrah", "Bowler");
Both player1 and player2 are separate objects created using the same constructor, they have similar structure but different values.
When we write something like creating a new object using a constructor, it might look simple from outside but internally multiple things are happening in sequence. JavaScript is not just calling a function, it is preparing a complete object setup before returning it.
const player = new Cricketer("Virat Kohli", "Batter");
Internally, JavaScript is doing something very close to this flow, which helps in understanding what exactly is happening under the hood.
const obj = {};
Object.setPrototypeOf(obj, Cricketer.prototype);
Cricketer.call(obj, "Virat Kohli", "Batter");
return obj;
So the overall flow becomes constructor to new object creation, then prototype linking, then property assignment using this, and finally returning that object. This entire process is automatically handled by the new keyword.
Every function in JavaScript has a prototype property, and when we use new, the created object gets linked to that prototype. This is where the concept of inheritance comes into picture, not by copying data, but by linking objects.
function Cricketer(name, role) {
this.name = name;
this.role = role;
}
Cricketer.prototype.introduce = function () {
console.log("Hi, I am " + this.name + " and I am a " + this.role);
};
const player1 = new Cricketer("Virat Kohli", "Batter");
const player2 = new Cricketer("Bumrah", "Bowler");
Here, introduce is not created separately for each object, instead both objects access it through the prototype. This means memory is used efficiently and behavior is shared. Because of this linking, the new object can access properties and methods defined on the prototype, and that is how inheritance works in this case.
The relation is quite straightforward once seen clearly. The constructor acts as a blueprint which defines what structure and behavior an object should have. The instance is the actual object that gets created using that blueprint. So in this case, Cricketer is the constructor, and player1 and player2 are instances. Each instance has its own data like name and role, but they can share methods through the prototype.
When we use new, this refers to the newly created object every single time. That is why even if the same constructor and same methods are used, the output can be different because the data inside each object is different.
const player1 = new Cricketer("Virat Kohli", "Batter");
const player2 = new Cricketer("Bumrah", "Bowler");
player1.introduce();
player2.introduce();
Even though both are using the same introduce method, this points to player1 in the first call and player2 in the second call. So the values of name and role change accordingly, which results in different outputs.
There is another way of creating objects which is factory functions, and it is useful to understand the difference between both approaches because both are used in real codebases.
function User(name) {
this.name = name;
}
const u1 = new User("A");
function createUser(name) {
return {
name: name
};
}
const u2 = createUser("A");
In constructor functions, the new keyword handles object creation and binding of this automatically, whereas in factory functions we manually create and return the object. Both achieve similar outcomes but the internal approach is different.
You must have come across classes in JavaScript, and they might look like something very different at first, but internally they are just a cleaner syntax over constructor functions and prototype logic. They do not introduce a new system, they just make the same thing easier to write and read.
class Cricketer {
constructor(name, role) {
this.name = name;
this.role = role;
}
introduce() {
console.log("Hi, I am " + this.name + " and I am a " + this.role);
}
}
const player1 = new Cricketer("Virat Kohli", "Batter");
Internally, this still uses prototypes. Also, type of class is function, which shows that classes are just syntactic sugar over the existing system.
When we use constructor functions with new, a new instance of the object is created every time. Each instance is independent in terms of data but can share behavior through the prototype.
const player1 = new Cricketer("Virat Kohli", "Batter");
const player2 = new Cricketer("Bumrah", "Bowler");
Both of these are different instances, and even though they are created from the same constructor, they do not interfere with each other’s data.
player1.introduce();
player2.introduce();
This is why calling methods on each instance produces different outputs, because this refers to the respective object each time.
The main idea is that the new keyword creates a new object, links that object to the constructor’s prototype, sets this to that object, and then returns it. Because of prototype linking, the object can access shared methods and properties, which is how inheritance is achieved here. At the same time, each instance remains independent in terms of its own data, which is why this behaves differently for each object created using the same constructor.