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
Explain equality of objects in JavaScript.
In JavaScript, primitives like strings, numbers, and booleans are compared by their values, while objects are compared by their reference. Reference comparison checks whether two or more objects point to the same location in memory, not whether they have the same content.
Reference vs Value Comparison
When you compare objects with == or ===, JavaScript checks if they reference the same object in memory, not if their properties are identical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Equality</title>
</head>
<body>
<h1>Object Equality in JavaScript</h1>
<div id="result"></div>
<script>
let result = document.getElementById('result');
// Two objects with identical properties
let obj1 = { name: "John", age: 25 };
let obj2 = { name: "John", age: 25 };
// obj3 references the same object as obj1
let obj3 = obj1;
result.innerHTML = `
<p>obj1 === obj2: ${obj1 === obj2}</p>
<p>obj1 === obj3: ${obj1 === obj3}</p>
<p>obj2 === obj3: ${obj2 === obj3}</p>
`;
</script>
</body>
</html>
obj1 === obj2: false obj1 === obj3: true obj2 === obj3: false
Why Objects Compare by Reference
Objects are stored in memory with unique addresses. Even if two objects have identical properties, they occupy different memory locations:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Reference</title>
</head>
<body>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let person1 = { name: "Alice" };
let person2 = { name: "Alice" };
let person3 = person1; // Same reference
// Modify person1
person1.name = "Bob";
output.innerHTML = `
<p>person1.name: ${person1.name}</p>
<p>person2.name: ${person2.name}</p>
<p>person3.name: ${person3.name}</p>
<p>person1 === person3: ${person1 === person3}</p>
`;
</script>
</body>
</html>
person1.name: Bob person2.name: Alice person3.name: Bob person1 === person3: true
Comparing Object Contents
To compare objects by their properties, you need custom comparison logic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Comparison</title>
</head>
<body>
<div id="demo"></div>
<script>
function isEqual(obj1, obj2) {
let keys1 = Object.keys(obj1);
let keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) return false;
for (let key of keys1) {
if (obj1[key] !== obj2[key]) return false;
}
return true;
}
let user1 = { name: "Sarah", age: 30 };
let user2 = { name: "Sarah", age: 30 };
let user3 = { name: "Mike", age: 30 };
document.getElementById('demo').innerHTML = `
<p>Reference equality: ${user1 === user2}</p>
<p>Content equality: ${isEqual(user1, user2)}</p>
<p>Different content: ${isEqual(user1, user3)}</p>
`;
</script>
</body>
</html>
Reference equality: false Content equality: true Different content: false
Practical Implications
Understanding object equality is crucial for:
- Array operations: Finding or removing objects from arrays
- State management: Detecting changes in application state
- Caching: Avoiding duplicate objects in memory
Conclusion
JavaScript objects are compared by reference, not content. Two objects with identical properties are not equal unless they reference the same memory location. For content-based comparison, implement custom comparison functions.
192 Views
