You've probably written something like this without thinking twice:
javascript
const today = new Date();
const pattern = new RegExp("hello");
That new sitting there what is it actually doing?
Most tutorials hand-wave it as it creates an object. And technically that's true. But there's a four-step process happening every time you type new, and once you see it laid out clearly, a lot of things in JavaScript prototypes, instances, this, class syntax suddenly snap into place.
Let's build this understanding from the ground up.
const today = new Date();
const pattern = new RegExp("hello");
That new sitting there — what is it actually doing? Most tutorials hand-wave it as "it creates an object." And technically that's true. But there's a four-step process happening every time you type new, and once you see it laid out clearly, a lot of things in JavaScript — prototypes, instances, this, class syntax — suddenly snap into place.
Let's build this understanding from the ground up.
The problem new is solving
Before new makes sense, the problem it solves needs to make sense.
Say you're building a simple app and you need to represent multiple users. The naive approach is just making plain objects:
const user1 = { name: "Ankit", age: 22, role: "admin" };
const user2 = { name: "Priya", age: 28, role: "editor" };
const user3 = { name: "Rohan", age: 19, role: "viewer" };
This works. For three users. But what happens when you have 300? You're copying the same shape by hand every time, with no guarantee the structure stays consistent. Miss a property on user 147 and you've got a bug that's annoying to track down.
What you really want is a template something you call once and get back a properly-shaped object every time. That's exactly what a constructor function is.
Constructor functions: a template for objects
A constructor function is just a regular function that you intend to call with new. By convention, its name starts with a capital letter not a rule JavaScript enforces, but a strong signal to anyone reading your code.
function User(name, age, role) {
this.name = name;
this.age = age;
this.role = role;
}
That this inside the function is the key. When you call it with new, this refers to the brand new object being created. Every property you attach to this ends up on that new object.
Now you can create as many users as you need:
const user1 = new User("Ankit", 22, "admin");
const user2 = new User("Priya", 28, "editor");
const user3 = new User("Rohan", 19, "viewer");
console.log(user1.name); // "Ankit"
console.log(user2.role); // "editor"
Each call to new User(...) produces a fresh, independent object. Change user1.name and user2.name doesn't budge. They share a shape but not their data.
The four things new does
This is the part most explanations skip. When you write new User("Ankit", 22, "admin"), JavaScript silently does four things in sequence. Understanding these four steps is the unlock for everything else.
Step 1
A blank object is created. JavaScript creates a fresh {}. Nothing on it yet. This is the object that will eventually be returned.
Step 2
The prototype is linked. That blank object gets its internal [[Prototype]] set to User.prototype. This is how the object inherits methods. More on this in a moment.
Step 3
The constructor runs with this pointing to the new object. User is called, and inside it, every this.something = ... line adds properties to that blank object. This is where your data lands.
Step 4
The new object is returned. If your constructor function doesn't explicitly return an object, JavaScript returns this automatically the fully populated object from step 3.
Here's how all four steps look if you imagine JavaScript doing it manually:
Prototype linking
Step 2 is the one that confuses people most, so let's give it the attention it deserves.
Every function in JavaScript automatically gets a prototype property it's an object that sits attached to the function. When you create an instance with new, that instance gets a hidden link back to the constructor's prototype. This link is what JavaScript follows when it can't find a property directly on the object.
Here's why this matters in practice. Instead of defining greet directly on every instance (which would create a new copy of the function for each object), you put it on the prototype once:
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.greet = function() {
console.log("Hi, I'm " + this.name);
};
const user1 = new User("Ankit", 22);
const user2 = new User("Priya", 28);
user1.greet(); // "Hi, I'm Ankit"
user2.greet(); // "Hi, I'm Priya"
user1 and user2 don't have greet on them directly. But when JavaScript looks for greet on user1, it follows the hidden prototype link up to User.prototype and finds it there. One function, shared by every instance.
Here's the relationship laid out visually:
The instances own their own data. The shared behavior lives on the prototype above them. That's the whole model.
Instances
Every object created with new SomeFunction() is called an instance of that constructor. JavaScript gives you a way to verify this:
console.log(user1 instanceof User); // true
console.log(user2 instanceof User); // true
instanceof checks whether User.prototype is anywhere in the object's prototype chain. Since we linked it in step 2, the answer is always true for objects created with new User.
You can also check which constructor built an object:
console.log(user1.constructor === User); // true
This is useful when you're debugging and want to confirm an object came from the constructor you think it did.
What happens if you forget new
This is a classic beginner mistake and it fails in a confusing way:
const user = User("Ankit", 22, "admin"); // no new!
console.log(user); // undefined
console.log(window.name); // "Ankit" — oops
Without new, the function runs as a regular function. There's no blank object created, nothing gets returned. Worse, this inside the function points to the global object so this.name = "Ankit" pollutes the global scope. This is exactly the kind of bug that takes twenty minutes to find.
The capital-letter naming convention exists precisely to signal: call this with new, not without it.
Classes
If you've used ES6 classes, here's something worth knowing: they are not a new object system. They're syntactic sugar over exactly what we just covered.
class User {
constructor(name, age, role) {
this.name = name;
this.age = age;
this.role = role;
}
greet() {
console.log("Hi, I'm " + this.name);
}
}
const user1 = new User("Ankit", 22, "admin");
Under the hood, this is identical to the constructor function + prototype version we wrote earlier. The constructor method is the function body. The greet method goes on User.prototype automatically. JavaScript is still running the same four-step process when you call new User(...).
The class syntax is cleaner to read and write especially when inheritance gets involved but it's not doing anything fundamentally different. Once you understand what new actually does, class syntax stops being magic and starts being shorthand.\
