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
What is the main difference between objects created using object literal and constructor function?
The main difference between objects created using object literal and constructor function lies in how they handle references and instances. Objects created with object literals are referenced by variables, while constructor functions create independent instances.
Let's explore both approaches with examples to understand this fundamental difference.
Objects Created Using Object Literal
When you create an object using object literal syntax and assign it to multiple variables, all variables point to the same object in memory. This means any change made through one variable affects all other variables referencing that object.
Example
<html>
<body>
<script>
var student = {
name: "Ravi"
}
var newStudent = student;
document.write("Before change");
document.write("<br>");
document.write("student name = " + student.name);
document.write("<br>");
document.write("new student name = " + newStudent.name);
document.write("<br>");
newStudent.name = "kumar";
document.write("After change");
document.write("<br>");
document.write("student name = " + student.name);
document.write("<br>");
document.write("new student name = " + newStudent.name);
</script>
</body>
</html>
Before change student name = Ravi new student name = Ravi After change student name = kumar new student name = kumar
Both variables show the same changed value because they reference the same object in memory.
Objects Created Using Constructor Function
Constructor functions create independent instances of objects. Each time you use the new keyword with a constructor function, it creates a separate object with its own properties. Changes to one instance do not affect other instances.
Example
<html>
<body>
<script>
var stu = function() {
this.name = "Ravi"
}
var newStudent = new stu();
var student = new stu();
document.write("Before change");
document.write("<br>");
document.write("student name = " + student.name);
document.write("<br>");
document.write("new student name = " + newStudent.name);
document.write("<br>");
newStudent.name = "kumar";
document.write("After change");
document.write("<br>");
document.write("student name = " + student.name);
document.write("<br>");
document.write("new student name = " + newStudent.name);
</script>
</body>
</html>
Before change student name = Ravi new student name = Ravi After change student name = Ravi new student name = kumar
Here, student retains its original name while newStudent has the changed name, proving they are independent objects.
Key Differences
| Aspect | Object Literal | Constructor Function |
|---|---|---|
| Instance Creation | Single object reference | Multiple independent instances |
| Memory Usage | One object in memory | Separate objects in memory |
| Property Changes | Affects all references | Affects only specific instance |
| Use Case | Single configuration objects | Creating multiple similar objects |
Conclusion
Object literals create shared references to a single object, while constructor functions create independent instances. Choose object literals for singletons and constructor functions when you need multiple independent objects with similar structure.
2K+ Views
