Why can't we compare arrays and objects with ===

This article explores a common JavaScript question: why the strict equality operator (===) doesn't work as expected when comparing arrays and objects. We'll delve into JavaScript's internal workings to understand this behavior.

JavaScript distinguishes between primitive and non-primitive data types. Primitive types (boolean, null, undefined, string, number) are passed by value, while non-primitive types (arrays, functions, and objects – all technically objects) are passed by reference.

Primitive Type Behavior (Pass by Value)

When you declare a primitive variable, the value is stored directly:

<code class="language-javascript">const name = 'John';
const age = 25;</code>

Variable	Value
name	'John'
age	25

Non-Primitive Type Behavior (Pass by Reference)

Non-primitive variables store a reference to the object's memory location, not the object itself:

<code class="language-javascript">const name = 'John';
const age = 25;</code>

Initially, fruits holds a reference (e.g., memory address H001) pointing to an empty array. After push(), the array at H001 is modified.

Reference Copying

When you copy a reference variable using =, you copy the reference, not the object's data:

<code class="language-javascript">const fruits = [];
fruits.push('Banana');</code>

Both fruits and yellowFruits now point to the same memory location. Modifying one modifies the other.

Adding 'Pineapple' to yellowFruits also changes fruits because they share the same reference.

Reassigning Reference Variables

Reassigning a reference variable creates a new reference:

<code class="language-javascript">const fruits = ['Banana'];
const yellowFruits = fruits;</code>

The original object { name: 'John' } remains in memory, but person now points to a new object { name: 'Mary' }.

Why === Fails with Arrays and Objects

The === operator compares references for non-primitive types. Therefore:

<code class="language-javascript">let person = { name: 'John' };
person = { name: 'Mary' };</code>

Even if arr1 and arr3 have identical contents, they have different memory addresses, resulting in false.

Function Parameters and Purity

Passing primitive values to functions copies the value. However, passing objects passes the reference. This distinction is crucial for understanding pure vs. impure functions.

• Pure Functions: Don't modify external state. They operate solely on their inputs and produce predictable outputs.
• Impure Functions: Can modify objects passed as arguments, affecting the original object outside the function's scope.

To create a pure function that modifies an object, create a copy before modification:

<code class="language-javascript">const arr1 = ['1'];
const arr2 = arr1;  // Same reference

console.log(arr1 === arr2); // true

const arr3 = ['1']; // Different reference
console.log(arr1 === arr3); // false</code>

In Summary

1. Primitive types are passed by value; non-primitive types are passed by reference.
2. === compares references for non-primitive types.
3. Understanding reference copying is vital for writing predictable and maintainable code.
4. Pure functions avoid side effects by not modifying external state.

For a deeper dive into JavaScript memory management, explore the call stack and memory heap.

The above is the detailed content of Why can't we compare arrays and objects with ===. For more information, please follow other related articles on the PHP Chinese website!