Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Creating JavaScript constructor using the "new" operator?
In JavaScript, constructor functions create objects using the new operator. A constructor function is a regular function that becomes a template for creating multiple objects with similar properties.
Syntax
function ConstructorName(param1, param2) {
this.property1 = param1;
this.property2 = param2;
}
// Create new object
let obj = new ConstructorName(value1, value2);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Constructor</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: green;
margin: 20px 0;
}
.btn {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>JavaScript Constructor Using new Operator</h1>
<div class="result"></div>
<button class="btn">Create Person Object</button>
<h3>Click the button to create and display person objects</h3>
<script>
let resEle = document.querySelector(".result");
// Constructor function
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
// Method inside constructor
this.getFullName = function() {
return this.firstName + " " + this.lastName;
};
}
document.querySelector(".btn").addEventListener("click", () => {
// Create multiple objects using new operator
let person1 = new Person('John', 'Doe', 25);
let person2 = new Person('Jane', 'Smith', 30);
resEle.innerHTML = "";
resEle.innerHTML += "<h4>Person 1:</h4>";
resEle.innerHTML += "Name: " + person1.getFullName() + "<br>";
resEle.innerHTML += "Age: " + person1.age + "<br><br>";
resEle.innerHTML += "<h4>Person 2:</h4>";
resEle.innerHTML += "Name: " + person2.getFullName() + "<br>";
resEle.innerHTML += "Age: " + person2.age + "<br><br>";
resEle.innerHTML += "<strong>Both objects are instances of Person: </strong>";
resEle.innerHTML += (person1 instanceof Person) + "<br>";
});
</script>
</body>
</html>
How Constructor Functions Work
When you use the new operator with a function, JavaScript:
- Creates a new empty object
- Sets
thisto reference the new object - Executes the constructor function
- Returns the new object
Simple Console Example
function Car(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
}
let car1 = new Car('Toyota', 'Camry', 2022);
let car2 = new Car('Honda', 'Civic', 2021);
console.log(car1.brand + " " + car1.model);
console.log(car2.brand + " " + car2.model);
console.log(car1 instanceof Car);
Toyota Camry Honda Civic true
Key Points
- Constructor functions should start with a capital letter by convention
- Always use
newoperator to create objects from constructors - Use
thiskeyword to assign properties to the new object - Each object created has its own copy of properties but shares the constructor
Conclusion
Constructor functions with the new operator provide a way to create multiple objects with the same structure. This pattern forms the foundation of object-oriented programming in JavaScript.
Updated on: 2026-03-15T23:18:59+05:30
199 Views
Advertisements