const data1 = {
d = "Hello"
}
const data2 = {
d = "Hello"
}console.log(data1 === data2)

Understanding Why data1 === data2 Returns False in JavaScript

In JavaScript, objects are one of the most commonly used data structures. However, understanding how objects are compared in JavaScript can sometimes be tricky. One of the most common questions developers face is: Why does data1 === data2 return false even though both objects have the same property value?

Let’s break this down and understand what’s happening behind the scenes in a simple, easy-to-understand way.

The Code

const data1 = { 
    d: "Hello" 
};

const data2 = { 
    d: "Hello" 
};

console.log(data1 === data2);

What Do We Expect?

At first glance, both data1 and data2 look identical. They are objects with the same property d and the same value "Hello". So, logically, one might think that the comparison data1 === data2 should return true.

But surprisingly, the output of this comparison is false. Let’s understand why.

JavaScript Object Comparison: By Reference, Not By Value

In JavaScript, objects (including arrays and functions) are reference types. This means that when you compare two objects using the strict equality operator (===), JavaScript does not compare the contents or properties of the objects. Instead, it compares the references (or memory addresses) where these objects are stored.

What does this mean?

When you compare two objects, JavaScript checks whether the references are the same. If the objects refer to the same location in memory, they are considered equal. If not, they are considered different, even if their properties and values are identical.

When you create an object in JavaScript, it gets stored in a specific location in memory.

Each object is identified by its reference, which is the memory location of that object.

Explaining the Code

In our example:

const data1 = { 
    d: "Hello" 
};

const data2 = { 
    d: "Hello" 
};

• data1 and data2 are two separate objects. Even though they contain the same property d with the same value "Hello", they are stored in different memory locations.
• When we compare data1 === data2, JavaScript compares the references (memory addresses) of data1 and data2, not the values of the properties inside them.
• Since data1 and data2 are two distinct objects in memory, their references are different. Therefore, the comparison data1 === data2 evaluates to false.

Important Concept: Objects are Reference Types

Here’s an analogy that might help:

• Imagine you have two people (data1 and data2) who both own identical cars (properties inside the objects).
• If you compare the people based on their cars, they seem to have the same car. But when you compare the people themselves, you realize they are different individuals, even though their cars are the same. So, their identities are different, even if their cars are the same.

This is similar to how object references work in JavaScript — the objects may look identical, but they are still separate instances in memory, so they are not considered equal when compared directly.

How Can We Compare Objects Based on Their Values?

If you want to compare objects based on their properties and values, you need to manually check each property. JavaScript doesn’t provide a built-in method to do this directly, but you can write a custom function or use libraries like Lodash that offer deep comparison functions.

Here’s a simple way to compare objects based on their values:

function areObjectsEqual(obj1, obj2) {
    return JSON.stringify(obj1) === JSON.stringify(obj2);
}

console.log(areObjectsEqual(data1, data2));  // Output: true

Conclusion

In JavaScript, objects are compared by reference, not by value. So, even if two objects have identical properties and values, the comparison data1 === data2 will return false because they are stored at different memory locations.

Understanding this distinction between value types (like numbers, strings, and booleans) and reference types (like objects and arrays) is crucial for working with JavaScript effectively. If you ever need to compare the contents of two objects, you’ll need to use a method like JSON.stringify or a deep comparison function.

Keep in mind that while comparing objects by reference might seem confusing at first, it’s an important concept that helps JavaScript manage memory and optimize performance.