The new Keyword in JavaScript
In JavaScript, creating objects is extremely common.
You create objects for:
Users
Products
Orders
Cars
Game characters
Tasks
Sometimes you only need one object.
But what if you need:
- Hundreds of similar objects?
Instead of manually writing each object again and again, JavaScript provides:
Constructor functions
The
newkeyword
The new keyword helps create objects automatically using a reusable blueprint.
In this blog, you’ll learn:
What the
newkeyword doesConstructor functions
Step-by-step object creation
Prototype linking
Instances created from constructors
The Problem Without new
Imagine manually creating multiple user objects.
const user1 = {
name: "Alex",
age: 22
};
const user2 = {
name: "John",
age: 25
};
This works…
But repeating the same structure again and again becomes inefficient.
We need a reusable way to create objects.
Constructor Functions
A constructor function acts like:
A blueprint for creating objects.
Simple Constructor Example
function User(name, age) {
this.name = name;
this.age = age;
}
This function describes:
- How user objects should be created
Creating Objects with new
const user1 = new User("Alex", 22);
console.log(user1);
Output
{
name: "Alex",
age: 22
}
What Does the new Keyword Do?
When you use:
new User()
JavaScript performs several hidden steps automatically.
This is the core idea to understand.
Step-by-Step Object Creation Process
When new is used:
Step 1: Create Empty Object
JavaScript secretly creates:
{}
Step 2: Link Prototype
The object is linked to:
- The constructor’s prototype
Step 3: Bind this
Inside the constructor:
this
now points to the new object.
Step 4: Add Properties
this.name = name;
this.age = age;
Properties are added to the object.
Step 5: Return the Object
The completed object is returned automatically.
Constructor → Instance Creation Flow
Constructor Function
↓
new
↓
Create Empty Object
↓
Add Properties
↓
Return Instance
Understanding this with new
Inside constructor functions:
this
refers to:
- The newly created object
Example
function Car(brand) {
this.brand = brand;
}
const car1 = new Car("Toyota");
console.log(car1);
Output
{
brand: "Toyota"
}
Why Constructor Functions Start with Capital Letters
By convention:
- Constructor function names start with capital letters
Example:
function User() {}
function Car() {}
function Product() {}
This helps developers recognize:
- “This function should be used with
new.”
Instances Created from Constructors
Objects created using constructors are called:
Instances
Example
const user1 = new User("Alex", 22);
const user2 = new User("John", 25);
Both:
user1user2
are instances of User.
Visual Understanding
User Constructor
│
├── user1
├── user2
└── user3
One constructor can create many objects.
Adding Methods to Constructor Objects
You can also add methods.
Example
function User(name) {
this.name = name;
this.sayHello = function() {
console.log(`Hello ${this.name}`);
};
}
const user1 = new User("Alex");
user1.sayHello();
Output
Hello Alex
How new Links Prototypes
This is one of the most important concepts in JavaScript.
Every constructor function has:
- A prototype object
Objects created with new automatically connect to it.
Example
function User(name) {
this.name = name;
}
User.prototype.sayHello = function() {
console.log(`Hello ${this.name}`);
};
const user1 = new User("Alex");
user1.sayHello();
What Happened Here?
sayHello() is not directly inside user1.
Instead:
- JavaScript looks inside the prototype
This saves memory because:
- All instances share the same method
Prototype Linking Visual
user1
│
↓
User.prototype
│
└── sayHello()
Why Prototypes Matter
Without prototypes:
- Every object would create duplicate methods
That wastes memory.
Prototypes allow:
- Shared behavior
Real-Life Analogy
Think of constructors like:
- Cookie cutters
Each cookie:
- Is a separate object
But all cookies:
- Come from the same mold
Simple Constructor Example
function Product(name, price) {
this.name = name;
this.price = price;
}
const phone = new Product("iPhone", 80000);
console.log(phone);
Output
{
name: "iPhone",
price: 80000
}
Common Beginner Mistake: Forgetting new
This is extremely common.
Wrong
const user = User("Alex", 22);
Without new:
- JavaScript does not create a new object properly
This often causes bugs.
Correct
const user = new User("Alex", 22);
How to Identify Constructor Functions
Usually:
Capitalized names
Used with
new
Example:
new Date()
new Array()
new User()
Built-In JavaScript Constructors
JavaScript itself uses constructors internally.
Examples:
new Date()
new Array()
new Object()
You’ve probably already used new before without realizing it.
Modern JavaScript and Classes
Modern JavaScript introduced:
- Classes
But classes internally still use:
Constructor logic
Prototypes
new
So understanding new is still extremely important.
Mental Model for Beginners
The easiest way to think about new:
new = “Create a new object using this blueprint.”
That’s the core idea.
Complete Object Creation Flow
Constructor Function
↓
new keyword
↓
Create empty object
↓
Attach properties
↓
Link prototype
↓
Return instance
Practice Exercises
Exercise 1
Create a constructor:
function Animal(name) {
this.name = name;
}
Create two instances.
Exercise 2
Add a method using prototype:
Animal.prototype.sound = function() {
console.log("Animal sound");
};
Exercise 3
Try creating objects both:
With
newWithout
new
Observe the difference.
Final Thoughts
The new keyword is one of the most important object creation concepts in JavaScript.
The key ideas are:
| Concept | Meaning |
|---|---|
| Constructor Function | Blueprint for objects |
new Keyword |
Creates object instances |
| Instance | Object created from constructor |
| Prototype Link | Shared behavior between instances |
Even though modern JavaScript uses classes heavily, the underlying concepts still depend on:
Constructors
Prototypes
The
newkeyword
Understanding these concepts gives you a much deeper understanding of how JavaScript actually works behind the scenes.
