In JavaScript, constructors are special functions used to create multiple objects with the same structure and behavior. They provide a way to create reusable object templates — a key concept in object-oriented programming.
This tutorial covers how to define, use, and understand object constructors step by step.
1. What is an Object Constructor?
An object constructor is a function that acts as a blueprint for creating objects. You define it once and then use it to generate multiple instances of similar objects.
2. Creating Objects Without a Constructor
Before we dive into constructors, here’s how objects are usually created:
javascriptCopyEditlet person1 = {
name: "Alice",
age: 25
};
let person2 = {
name: "Bob",
age: 30
};
This works, but it becomes repetitive if you need to create many similar objects.
3. Defining a Constructor Function
To avoid repeating code, you can define a constructor function:
javascriptCopyEditfunction Person(name, age) {
this.name = name;
this.age = age;
}
Notice the use of this. It refers to the new object being created.
4. Creating Objects with a Constructor
Once the constructor is defined, use the new keyword to create objects:
javascriptCopyEditlet person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);
console.log(person1.name); // Alice
console.log(person2.age); // 30
Every time you call new Person(...), a new object is created with its own name and age.
5. Adding Methods to Constructors
You can also define methods inside the constructor:
javascriptCopyEditfunction Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hi, I'm " + this.name);
};
}
let person = new Person("Eve", 22);
person.greet(); // Hi, I'm Eve
However, this creates a new copy of the method for each object, which is not efficient.
6. Using Prototypes for Methods (Better Way)
To share a single method among all instances, add it to the constructor’s prototype:
javascriptCopyEditfunction Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log("Hello, my name is " + this.name);
};
let person1 = new Person("Dave", 40);
let person2 = new Person("Nina", 28);
person1.greet(); // Hello, my name is Dave
person2.greet(); // Hello, my name is Nina
This way, the greet() method is shared across all objects created with Person.
7. Constructors vs Object Literals
| Feature | Object Literal | Constructor Function |
|---|---|---|
| Reusability | Limited | High |
| Syntax | Simple | Requires new and this |
| Method Sharing | Manual | Easy with prototype |
| Performance | Slower with methods | Better with shared prototype |
8. ES6 Classes (Modern Alternative)
JavaScript ES6 introduced the class syntax which makes constructors easier to write and read:
javascriptCopyEditclass Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, I'm ${this.name}`);
}
}
let p = new Person("Mia", 35);
p.greet(); // Hello, I'm Mia
Behind the scenes, this is still using constructor functions and prototypes, but the syntax is cleaner.
9. Type Checking with instanceof
You can check if an object was created from a specific constructor:
javascriptCopyEditconsole.log(p instanceof Person); // true
This is useful for debugging or writing logic that depends on object types.
Conclusion
JavaScript object constructors help you create multiple objects with the same structure and behavior efficiently. Use:
- Function constructors for traditional JavaScript
- Prototypes to share methods
- Classes for modern, clean syntax