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
Object literals vs constructors in JavaScript
Object literals and constructors are two fundamental ways to create objects in JavaScript. Object literals create singleton objects, while constructor functions can create multiple instances with shared behavior.
Object Literal Notation
Object literals use curly braces {} to define properties and methods directly. They are ideal for creating single-use objects or configuration objects.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Object Literal Example</title>
</head>
<body>
<script>
const userDetails = {
name: "Aman",
age: 22,
company: "tutorialspoint",
greet: function() {
document.write("Hello, I'm " + this.name);
}
};
document.write("Name: " + userDetails.name + "<br>");
document.write("Age: " + userDetails.age + "<br>");
userDetails.greet();
</script>
</body>
</html>
Name: Aman Age: 22 Hello, I'm Aman
Constructor Function Notation
Constructor functions use the new keyword to create multiple object instances. Each instance has its own copy of properties but can share methods through prototypes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructor Function Example</title>
</head>
<body>
<script>
function User(name, age, company) {
this.name = name;
this.age = age;
this.company = company;
this.greet = function() {
document.write("Hello, I'm " + this.name + "<br>");
};
}
const user1 = new User("Aman", 22, "tutorialspoint");
const user2 = new User("Sara", 25, "techcorp");
user1.greet();
user2.greet();
document.write("Different instances: " + (user1 !== user2));
</script>
</body>
</html>
Hello, I'm Aman Hello, I'm Sara Different instances: true
Key Differences
The fundamental difference lies in instance creation and memory usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comparing Object Creation</title>
</head>
<body>
<script>
// Object literal - singleton
const website1 = {
url: "https://www.tutorialspoint.com",
display: function() { return this.url; }
};
// Constructor function - multiple instances
function Website(url) {
this.url = url;
this.display = function() { return this.url; };
}
const website2 = new Website("https://www.tutorialspoint.com");
const website3 = new Website("https://www.example.com");
document.write("Literal object: " + website1.display() + "<br>");
document.write("Constructor instance 1: " + website2.display() + "<br>");
document.write("Constructor instance 2: " + website3.display() + "<br>");
document.write("Are constructor instances different? " + (website2 !== website3));
</script>
</body>
</html>
Literal object: https://www.tutorialspoint.com Constructor instance 1: https://www.tutorialspoint.com Constructor instance 2: https://www.example.com Are constructor instances different? true
Comparison
| Feature | Object Literal | Constructor Function |
|---|---|---|
| Instance Creation | Single object (singleton) | Multiple instances |
| Memory Usage | Lower - one object | Higher - multiple objects |
| Reusability | Limited | High - template for objects |
| Use Case | Configuration, single-use objects | Creating similar objects |
When to Use Each Approach
Use Object Literals when:
- Creating a single, unique object
- Defining configuration objects
- Simple data structures
Use Constructor Functions when:
- Creating multiple similar objects
- Need object inheritance
- Building reusable object templates
Conclusion
Object literals are perfect for single objects and configuration, while constructor functions excel at creating multiple instances. Choose based on whether you need one object or many similar objects.
1K+ Views
