Let me guess something.
You learned JavaScript objects like this:
const dog1 = {
name: "Rocky",
breed: "Labrador",
bark() {
console.log("Woof!");
}
};
const dog2 = {
name: "Max",
breed: "Beagle",
bark() {
console.log("Woof!");
}
};
Looks fine.
But here’s the uncomfortable question.
What happens when you need 50 dogs?
Are you going to copy-paste the same object again and again?
If that’s your plan…
We need to upgrade your JavaScript skills today 😄
This is exactly why constructor functions exist.
Let’s break it down step by step.
The Real Problem: Repeating Object Code
Imagine you're building a game with robots.
Each robot has:
- name
- energy level
- ability to recharge
You could write:
const robot1 = {
name: "RX-1",
energy: 100,
recharge() {
this.energy += 20;
}
};
const robot2 = {
name: "RX-2",
energy: 100,
recharge() {
this.energy += 20;
}
};
Notice something?
The structure is identical.
You're just changing values.
That means we need a blueprint.
Step 1: Create a Constructor Function
A constructor function is basically a factory blueprint for objects.
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Two important things here:
- Function name starts with a capital letter
- We use the this keyword
Why?
Because this represents the new object being created.
Step 2: Create Objects with new
Now we can create robots like this:
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
Boom
Now check the object:
console.log(robot1);
Output:
{
name: "RX-1",
energy: 100
}
Instead of writing objects manually, we generate them instantly.
Much better.
▶ Playground: Creating Multiple Objects
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
const robot3 = new Robot("RX-3", 50);
console.log(robot1);
console.log(robot2);
console.log(robot3);
Try pasting this in:
- CodePen
- JSFiddle
- browser console
and watch how the objects are generated.
Wait… What Does new Actually Do?
Most developers use new like a magic spell without knowing what it does.
Let’s expose the magic.
When you run:
const robot1 = new Robot("RX-1", 100);
JavaScript secretly performs four steps.
1. Create an empty object
{}
2. Set this to the new object
Inside the constructor:
this.name = name
Actually becomes:
robot1.name = name
3. Connect the object to the prototype
This is where JavaScript inheritance begins.
4. Return the object
Final result:
{
name: "RX-1",
energy: 100
}
So the new keyword basically says:
“Create an object using this blueprint.”
Step 3: Adding Methods (The Beginner Mistake)
You might be tempted to do this:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
console.log(this.name + " recharged!");
};
}
Works perfectly.
const robot1 = new Robot("RX-1", 100);
robot1.recharge();
But there's a hidden problem.
Every time you create a robot:
const robot2 = new Robot("RX-2", 80);
JavaScript creates a brand new copy of the recharge function.
So if you create 100 robots → 100 functions in memory.
That’s inefficient.
Time for the real JavaScript power.
▶ Playground: The Memory Problem
function Robot(name, energy) {
this.name = name;
this.energy = energy;
this.recharge = function () {
this.energy += 20;
};
}
const r1 = new Robot("RX-1", 100);
const r2 = new Robot("RX-2", 80);
console.log(r1.recharge === r2.recharge); // false
Output:
false
Each robot has its own function copy.
Step 4: Enter Prototype (The Real Superpower)
Instead of putting methods inside the constructor, we use prototype.
Prototype allows all objects to share the same method.
First define the constructor:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Now attach a method using prototype:
Robot.prototype.recharge = function () {
this.energy += 20;
console.log(this.name + " is recharging ⚡");
};
Now create robots:
const robot1 = new Robot("RX-1", 100);
const robot2 = new Robot("RX-2", 80);
Use the method:
robot1.recharge();
robot2.recharge();
Output:
RX-1 is recharging ⚡
RX-2 is recharging ⚡
Here’s the important part.
The recharge() function exists only once in memory, but every robot can use it.
This is prototype-based inheritance.
▶ Playground: Prototype Sharing
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Robot.prototype.recharge = function () {
this.energy += 20;
};
const r1 = new Robot("RX-1", 100);
const r2 = new Robot("RX-2", 80);
console.log(r1.recharge === r2.recharge); // true
Output:
true
Now both robots share the same function in memory.
Visualizing What Happens
When you access:
robot1.recharge()
JavaScript checks in this order:
1.Does robot1 have recharge? ❌
2.Check Robot.prototype ✅
3.Found it → execute function
This lookup chain is called the prototype chain.
And yes…
This is how JavaScript inheritance works internally.
Constructor Functions vs Classes
Modern JavaScript introduced classes.
Example:
class Robot {
constructor(name, energy) {
this.name = name;
this.energy = energy;
}
recharge() {
this.energy += 20;
}
}
Looks nicer, right?
But here's the secret:
JavaScript classes are just syntactic sugar over constructor functions + prototypes.
Under the hood, it's still using prototype-based inheritance.
So if you understand constructor functions…
You understand JavaScript at a deeper level than many developers.
Quick Recap
Constructor functions help you:
✔ Create multiple objects easily
✔ Avoid repeating object structures
✔ Use prototypes to share methods
✔ Understand how JavaScript really works
Basic structure:
function Robot(name, energy) {
this.name = name;
this.energy = energy;
}
Robot.prototype.recharge = function () {
this.energy += 20;
};
const robot1 = new Robot("RX-1", 100);
Final Thought
If you're skipping constructor functions because:
“Classes are easier.”
You're missing the core idea of JavaScript object creation.
And sooner or later…
That gap will catch up with you.
Learn the fundamentals now.
Future you will be grateful.
Top comments (0)