The new Keyword in JavaScript (Simple Beginner Guide)
Imagine you have a blueprint for building houses.
The blueprint is not the actual house. It only describes how a house should be created. Now every time you want a new house, you use that blueprint to create one. JavaScript works in a very similar way. Constructor functions act like blueprints. The new keyword creates actual objects from them
Let’s understand this step by step.
Why Do We Need new?
Suppose you want to create multiple users.
Without a constructor, you may write:
const user1 = {
name: "Ashish",
age: 20
};
const user2 = {
name: "Rahul",
age: 22
};
This works…
But imagine creating hundreds of users manually. You would repeat the same structure again and again. That’s where constructor functions help.
What is a Constructor Function?
A constructor function is a normal function used to create objects.
By convention, constructor names start with a capital letter.
Example
function User(name, age) {
this.name = name;
this.age = age;
}
What’s happening here?
This function describes how a user object should lookBut right now no object is created yet. It is only a blueprint.
What Does the new Keyword Do?
The new keyword creates a new object using a constructor function.
Example
const user1 = new User("Ashish", 20);
Now an actual object gets created.
Output
{
name: "Ashish",
age: 20
}
Step-by-Step: What Happens Internally?
This is the most important part. When JavaScript sees:
new User("Ashish", 20)
it performs several hidden steps. Let’s understand them slowly.
Step 1: Create a New Empty Object
JavaScript first creates an empty object behind the scenes.
Something like:
{}
Step 2: Link the Object to Prototype
JavaScript connects the new object to the constructor’s prototype. This is how objects later access shared methods.
You don’t see this directly, but it happens automatically. This is one of the biggest powers of new.
Step 3: Set this to the New Object
Inside the constructor function:
this
starts pointing to the newly created object.
So:
this.name = name;
actually means:
newObject.name = name;
Step 4: Execute the Constructor Function
Now JavaScript runs the constructor function.
function User(name, age) {
this.name = name;
this.age = age;
}
The values get added to the object.
Step 5: Return the Object
Finally, JavaScript automatically returns the new object.
So:
const user1 = new User("Ashish", 20);
stores that object in user1.
Full Model
Here’s the complete flow:
Constructor Function
↓
new keyword
↓
Create empty object
↓
Link prototype
↓
Bind this
↓
Return object
Why this Matters Here
Inside constructor functions:
this
refers to the new object being created.
Example:
function Car(brand) {
this.brand = brand;
}
When you do:
const car1 = new Car("BMW");
JavaScript internally does:
car1.brand = "BMW"
What Are Instances?
Objects created from constructors are called:
instances
Example:
const user1 = new User("Ashish", 20);
const user2 = new User("Rahul", 22);
Both are instances of User.
Simple Understanding
Think like this:
Constructor = blueprint
Instance = actual object created from blueprint
How Prototype Linking Works
Every constructor function has a special object called:
prototype
Objects created using new get linked to it automatically.
Example
User.prototype.sayHello = function () {
console.log("Hello");
};
Now every instance can use this method.
user1.sayHello();
Why this is useful
Instead of copying methods into every object, JavaScript shares them through prototypes.
Saves memory, Makes code efficient
Without new, Things Break
Look carefully:
const user1 = User("Ashish", 20);
No new.
Now JavaScript does not create a new object automatically. This can lead to unexpected behavior. Constructor functions are meant to be used with new.
Example:
function Product(name, price) {
this.name = name;
this.price = price;
}
const phone = new Product("iPhone", 80000);
const laptop = new Product("MacBook", 150000);
Why this is powerful
You define the structure once and create many objects easily.
Important Clarification
Modern JavaScript often uses:
class
syntax instead of constructor functions.
But internally:
classes still use the same constructor + prototype concepts. So understanding new is extremely important.
Best Way to Remember
Think of new like this:
“Create a fresh object using this blueprint”
Final Thought
The new keyword is not just syntax. It controls the entire object creation process in JavaScript.
Once you understand how new works, concepts like:
constructors
prototypes
classes
become much easier.
