Referential Equality: Referential equality of two objects means that they point to the exact same object in memory, i.e. they use the same reference. Structural equality on the other hand means that two objects have the same value. We know that when we create a variable or object or array some memory location will be allocated to it.
Structural equality
The structural equality is represented by == operator.
It basically uses the equals() method to compare two objects only in terms of their values. So please note that we only compare values using this operator. For example, if you use 10 equal to 20 then it actually compares the two values using, the equals method, So this expression will return false as they are not equal.
Referential Equality
Referential Equality is represented by === symbol, this operator is used to check if two reference variables point to the same object or not. expression a===b will check if a and b reference variables point to the same object or not. If they point to the same object, like in this case, then this expression will return true otherwise it will return false.
So in the case of referential equality, we don’t worry about the values of the objects. We just need to know that – these two variables point to the same object or not.
JavaScript engines have two places to store data:
Stack: It is a data structure used to store static data. Static data refers to data whose size is known by the engine during compile time. In JavaScript, static data includes primitive values like strings, numbers, boolean, null, and undefined. References that point to objects and functions are also included. A fixed amount of memory is allocated for static data. This process is known as static memory allocation.
Heap: It is used to store objects and functions in JavaScript. The engine doesn’t allocate a fixed amount of memory. Instead, it allocates more space as required.
Difference between heap and stack memory:
Stack memory
Primitive data types and references
Size is known at compile time
Fixed memory allocated
Heap memory
Objects and functions
Size is known at run time
No limit for object memory
Concept of Stack memory:
Let’s see example. In case of variables which stores static data including strings, numbers, boolean, null, and undefined. Suppose there are two variables var1 and var2 and both have same value i.e, ‘kavita’, both the variables are stored in stack memory, there will be no role of heap memory. Now when we console log var1==var2 then the result will be true because both variable have same value, when we console log var1===var2 then the result will be true because both variable are referentially also equal.
Now in above case we changes value of variable 2 to suhas hence they become structuallyand referentially unequal. We another variable named var3 which is equal to var2, so var2 and var3 are structurally and referentially equal.
Concept of Heap memory:
We already know that we have something called Heap memory, where the objec ts arrays and functions are actually stored and we have stack memory, where we store the reference variables. Suppose we have two objects named obj1 and obj2 with some property. So these two object will be created within the heap memory and their reference variables obj1 and obj2 will be stored in the Stack memory. And of course, they will point to their own objects. Now, if you compare u1 and u2 using the Structural equality operator. Then this means we are comparing the value of u1 and u2. The value of u1 is User1 object and the value of u2 is User2 object. So internally it means this statement uses equals() method. Since both values are different, of course, we get false in the output i.e. both object, values are not the same. Now, if you compare them referentially, then it is quite clear from what we saw over here, that both u1 and u2 point to different objects. So here as well, we will get false. Because obj1 and obj2 both point to their own objects i.e. different objects. Fine?, So I hope you got an idea of what these two operators actually means and their usage. Next, we used obj2 equal to obj3. So this statement will make obj3 point to the same object as it was being done by obj2. Right? i.e. the obj2 object. So here, we get obj3 pointing to the same object obj2. So this expression will be true. Because we are comparing obj2 with obj2 object itself, which is of course true. Next, this expression will again return true. Because both u3 and u4 point to the same object. Fine?, Which is clearly visible over here.
In above example obj2 and obj3 are equal and they points to same object. When we add new property in object, for both variable it will be added as both variableobj2 and obj3 points to same object and they will be structurally and referentially equal.