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
Create many JavaScript objects as the same type?
In JavaScript, there are several ways to create multiple objects of the same type. JavaScript is a prototype-based object-oriented language, which means objects can inherit directly from other objects without needing traditional classes. This article explores various methods for creating objects with consistent structure and behavior.
Using Constructor Functions
Constructor functions are one of the most traditional ways to create multiple objects with the same structure. A constructor is simply a function that, when called with the new keyword, creates and returns a new object instance.
<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
function MotorBike(name, manufacturer, engineCapacity) {
this.name = name;
this.manufacturer = manufacturer;
this.engineCapacity = engineCapacity;
}
let bike1 = new MotorBike('Honda Shine', 'Honda', '125cc');
let bike2 = new MotorBike('Yamaha R15', 'Yamaha', '155cc');
document.write(bike1.name + '<br>');
document.write(bike1.manufacturer + '<br>');
document.write(bike1.engineCapacity + '<br><br>');
document.write(bike2.name + '<br>');
document.write(bike2.manufacturer + '<br>');
document.write(bike2.engineCapacity);
</script>
</body>
</html>
Using Object Literals
Object literals provide a simple way to create single objects. However, they're not ideal for creating multiple objects of the same type since you need to repeat the structure for each object.
<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
let bike = {
name: 'Honda Shine',
manufacturer: 'Honda',
engineCapacity: '125cc'
};
document.write(bike.name + '<br>');
document.write(bike['manufacturer'] + '<br>');
document.write(bike.engineCapacity);
</script>
</body>
</html>
Adding Methods to Objects
Methods can be added to objects either during creation or after the object has been declared. This allows objects to have behavior in addition to properties.
<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
let bike = {
name: 'Honda Shine',
manufacturer: 'Honda',
engineCapacity: '125cc',
engineStart: function() {
document.write('Engine started! Racing begins...<br>');
}
};
bike.engineStart();
// Adding method after object creation
bike.engineStop = function() {
document.write('Engine stopped. Race finished.');
};
bike.engineStop();
</script>
</body>
</html>
Using Object.create()
The Object.create() method creates a new object using an existing object as its prototype. This is useful for creating objects that inherit properties and methods from a prototype object.
<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
const motorBike = {
isDriving: false,
printText: function() {
document.write(`I always ride my ${this.name}. Racing status: ${this.isDriving}`);
}
};
const bike = Object.create(motorBike);
bike.name = 'Honda Shine bike';
bike.isDriving = true;
bike.printText();
</script>
</body>
</html>
Using ES6 Classes
ES6 introduced a class syntax that provides a more familiar way to create objects for developers coming from class-based languages. Classes are essentially syntactic sugar over constructor functions and prototypes.
<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
class MotorBike {
constructor(name, manufacturer, engineCapacity) {
this.name = name;
this.manufacturer = manufacturer;
this.engineCapacity = engineCapacity;
}
getDetails() {
return `${this.name} by ${this.manufacturer} - ${this.engineCapacity}`;
}
}
let bike1 = new MotorBike('Honda Shine', 'Honda', '125cc');
let bike2 = new MotorBike('Yamaha R15', 'Yamaha', '155cc');
document.write(bike1.getDetails() + '<br>');
document.write(bike2.getDetails());
</script>
</body>
</html>
Comparison of Methods
| Method | Reusability | Memory Efficiency | Use Case |
|---|---|---|---|
| Constructor Functions | High | Good with prototypes | Traditional object creation |
| Object Literals | Low | Poor for multiple objects | Single objects |
| Object.create() | High | Excellent | Prototype-based inheritance |
| ES6 Classes | High | Good | Modern object-oriented approach |
Conclusion
For creating multiple objects of the same type, constructor functions and ES6 classes are the most effective approaches. Choose ES6 classes for modern applications and constructor functions for broader browser compatibility.
2K+ Views
