Exploring the Mystery of Inequality: Why Two Empty Arrays or Objects in JavaScript are Not Equal
Published: 2023-03-08 04:13:59

<p>In JavaScript, data can be passed either by value or reference. The data type passed as a value is called primitive type while the data type passed as a reference can be collectively called Objects.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1673781216362/355e4d42-76b4-4a56-b4ba-00bf3c8ce2e3.jpeg" alt class="image--center mx-auto" /></p>
<p>Primitive values are stored directly in the variable, and when the variable is assigned a new value, the old value is overwritten. Think of the variables as having no relationship to each other.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">let</span> x = <span class="hljs-number">5</span>;
<span class="hljs-keyword">let</span> y = x;
x = <span class="hljs-number">10</span>;
<span class="hljs-built_in">console</span>.log(y);  <span class="hljs-comment">// prints 5</span>
</code></pre>
<p>When a variable is assigned a non-primitive value, such as an object or array, it is given a reference to that value instead of the value itself. This reference points to the location in memory where the object is stored, and the variable does not contain the object's value directly.</p>
<p>When a variable, <code>let arr = []</code>, is assigned the object, it receives the address or location of that object in memory, rather than the object itself. This means that the variable holds a reference to the object rather than containing the object's value directly.</p>
<p>Let's clear it out with examples</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1673781550282/45799cf2-d6eb-490b-babe-913d2d2eb571.jpeg" alt class="image--center mx-auto" /></p>
<p>In the above example, we have two variables a and b that are assigned to the same object, they will be referentially equal.</p>
<p>However, if we create new objects with the same properties, they will not be referentially equal to the first object, even though they have the same content.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1673781695854/c8522b90-5872-47a5-b456-4b3bf7bde61b.jpeg" alt class="image--center mx-auto" /></p>
<p>Although the previous explanations may have provided a clear understanding, some confusion may still exist. To further clarify, let's consider a final example and examine it in detail.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// Here b is assigned the reference to the object that a holds,</span>
<span class="hljs-comment">// so, the comparison returns true</span>
<span class="hljs-keyword">let</span> a = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">"Michael"</span>,
    <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>
}
<span class="hljs-keyword">let</span> b = a
<span class="hljs-built_in">console</span>.log(b === a) <span class="hljs-comment">// prints true</span>

<span class="hljs-comment">//Now b holds a reference to a new object and a holds a reference to the first object, so the comparison returns false</span>
b = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">"Richard"</span>,
    <span class="hljs-attr">age</span>: <span class="hljs-number">45</span>
}
<span class="hljs-built_in">console</span>.log(b === a) <span class="hljs-comment">// prints false</span>
</code></pre>
<p>If you want to check the properties of two distinct objects, then there are tons of ways you can do that. But the easiest method is using the`<code>JSON.stringify</code>` method.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1673781823638/52782da2-45c6-467f-bc3b-5125ea27df70.jpeg" alt class="image--center mx-auto" /></p>
<p>In summary, primitive equality compares values and referential equality compares references to objects.</p>
</br>