JavaScript Object Constructors
5 April 2025 | Category: JavaScript
A constructor is a special function used to create and initialize objects.
Think of it like a template or blueprint for creating multiple similar objects.
đ§± Without Constructor:
const person1 = {
name: "Alice",
age: 25
};
const person2 = {
name: "Bob",
age: 30
};
Thatâs fine, but what if you want to create 100 people? Youâd repeat yourself a lot.
â With Constructor Function:
function Person(name, age) {
this.name = name;
this.age = age;
}
Now you can create unlimited people like this:
const p1 = new Person("Alice", 25);
const p2 = new Person("Bob", 30);
đ§ this
Keyword in Constructor
Inside a constructor, this
refers to the new object being created.
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand); // Toyota
đ The new
Keyword
When you call a constructor with new
, JavaScript does three things:
- Creates a new empty object
- Sets
this
to point to that object - Returns the object automatically
đ§° Adding Methods to Constructor
You can add functions (methods) inside the constructor:
function Student(name, marks) {
this.name = name;
this.marks = marks;
this.greet = function() {
return `Hello, I'm ${this.name}`;
};
}
const s1 = new Student("Amit", 88);
console.log(s1.greet()); // Hello, I'm Amit
đ Creating Multiple Objects
const user1 = new Person("Ravi", 21);
const user2 = new Person("Sita", 22);
const user3 = new Person("Dev", 23);
All these users share the same structure, but with different data.
đŠ Constructor with Arrays or Objects
function Product(name, price, tags) {
this.name = name;
this.price = price;
this.tags = tags;
}
const phone = new Product("iPhone", 90000, ["apple", "mobile"]);
console.log(phone.tags); // ["apple", "mobile"]
âïž Constructor with Default Values
function Book(title = "Unknown", author = "Anonymous") {
this.title = title;
this.author = author;
}
const b1 = new Book("1984", "George Orwell");
const b2 = new Book();
đĄ Constructor vs Object Literal
Feature | Object Literal | Constructor Function |
---|---|---|
Syntax | {} | function MyObj() {} |
Reusability | Manual copy | Can create multiple |
new keyword required? | â | â |
Ideal for | One-time use | Repeated object creation |
đ Bonus: Constructor with Prototypes (Advanced)
To avoid duplicating methods in every object:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return `${this.name} makes a sound.`;
};
const dog = new Animal("Bruno");
console.log(dog.speak()); // Bruno makes a sound.
Now all Animal
objects share the same speak()
method â more memory efficient!
đ§Ș Practice Example
function Employee(name, salary) {
this.name = name;
this.salary = salary;
this.display = function () {
return `${this.name} earns âč${this.salary}`;
};
}
const emp1 = new Employee("Neha", 40000);
const emp2 = new Employee("Karan", 50000);
console.log(emp1.display());
console.log(emp2.display());
đ Summary
â Object constructors:
- Help create multiple objects easily
- Use
this
keyword for properties - Are called using the
new
keyword - Can include methods
- Are memory-efficient with
prototype