Understanding the new Keyword and Constructor Functions in JavaScript
As you start creating multiple objects in JavaScript, you may notice that writing the same structure again and again becomes repetitive. This is where constructor functions and the new keyword help us create objects efficiently.
They allow us to define a template and generate multiple objects from it, similar to how a blueprint creates real-world items.
In this article, we will explore:
What the
newkeyword doesWhat constructor functions are
The object creation process step by step
How
newlinks prototypesInstances created from constructors
All explanations are simple and beginner-friendly.
Why Do We Need Constructor Functions?
Imagine creating multiple users like this:
let user1 = { name: "Shivam", age: 21 };
let user2 = { name: "Rahul", age: 25 };
let user3 = { name: "Aman", age: 20 };
This works, but:
code is repetitive
difficult to scale
harder to maintain
Instead, we can define a constructor function and reuse it.
What is a Constructor Function?
A constructor function is a special function used to create objects.
By convention:
its name starts with a capital letter
it is used with the
newkeyword
Example:
function Person(name, age) {
this.name = name;
this.age = age;
}
This function acts as a blueprint for creating objects.
What Does the new Keyword Do?
When you use new, JavaScript performs several steps automatically.
Example:
let person1 = new Person("Shivam", 21);
Object Creation Process (Step-by-Step)
When new Person() is called, JavaScript does the following:
Step 1: Creates a new empty object
{}
Step 2: Sets this to the new object
Inside the constructor:
this → {}
Step 3: Assigns properties
this.name = "Shivam";
this.age = 21;
Now the object becomes:
{ name: "Shivam", age: 21 }
Step 4: Links the object to the prototype
The new object is connected to:
Person.prototype
Step 5: Returns the object
Finally, the new object is returned and stored in person1.
Constructor → Instance Flow
Person (Constructor)
|
| new
v
New Object Created
|
v
person1 (Instance)
Creating Multiple Instances
Once the constructor is defined, we can create multiple objects easily.
let person1 = new Person("Shivam", 21);
let person2 = new Person("Rahul", 25);
console.log(person1);
console.log(person2);
Output:
Person { name: "Shivam", age: 21 }
Person { name: "Rahul", age: 25 }
Each object is called an instance of the constructor.
Adding Methods Using Prototype
Instead of adding methods inside the constructor (which duplicates them), we attach them to the prototype.
Person.prototype.greet = function() {
console.log("Hello, my name is " + this.name);
};
Now every instance can use this method:
person1.greet();
person2.greet();
Output:
Hello, my name is Shivam
Hello, my name is Rahul
How new Links Prototypes
When an object is created using new, it is automatically linked to the constructor’s prototype.
Visual:
person1
|
v
Person.prototype
|
v
Object.prototype
This allows all instances to share common methods.
Why This is Important
Without prototype sharing:
each object would have its own copy of methods
memory usage increases
code becomes inefficient
With prototypes:
methods are shared
memory is saved
code is cleaner
Example: Car Constructor
function Car(brand, speed) {
this.brand = brand;
this.speed = speed;
}
Car.prototype.showDetails = function() {
console.log(this.brand + " runs at " + this.speed + " km/h");
};
Create objects:
let car1 = new Car("Toyota", 180);
let car2 = new Car("Honda", 200);
car1.showDetails();
car2.showDetails();
Output:
Toyota runs at 180 km/h
Honda runs at 200 km/h
Assignment (Practice Exercise)
Try this in your console.
1) Create a Constructor Function
function Student(name, age) {
this.name = name;
this.age = age;
}
2) Create Multiple Instances
let s1 = new Student("Aman", 20);
let s2 = new Student("Riya", 22);
3) Add a Method Using Prototype
Student.prototype.printDetails = function() {
console.log(this.name + " is " + this.age + " years old");
};
4) Call the Method
s1.printDetails();
s2.printDetails();
Prototype Linking Visualization
s1 ---------\
\
→ Student.prototype → Object.prototype
/
s2 ---------/
All instances share the same prototype.
Final Thoughts
The new keyword and constructor functions provide a structured way to create multiple objects using a single template. They help reduce repetition and make your code more organized.
By understanding:
how constructor functions work
what the
newkeyword does internallyhow objects are created step by step
how prototypes link instances
you build a strong foundation for understanding object creation and inheritance in JavaScript.
As you practice, try creating constructors for real-world entities like Users, Products, or Orders. This will help you see how powerful and reusable this pattern can be.