JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you’ve ever wondered why [] === []
evaluates to false
, this guide explains the reason and provides practical solutions for comparing arrays and objects correctly. See Optional Chaining (?.): How to Avoid ‘Cannot Read Property’ Errors in JavaScript
[] === []
is false
in JavaScriptIn JavaScript, arrays and objects are reference types, meaning:
[]
) or object ({}
), JavaScript stores it in memory and returns a reference (memory address) to it.===
(strict equality) operator checks if two variables point to the same memory location, not if their contents are identical.const arr1 = [];
const arr2 = [];
console.log(arr1 === arr2); // false (different memory references)
console.log(arr1 === arr1); // true (same reference)
Unlike arrays/objects, primitives (numbers, strings, booleans, etc.) are compared by value:
console.log(5 === 5); // true
console.log("hello" === "hello"); // true
Since ===
doesn’t work for deep comparisons, here are alternative methods:
JSON.stringify()
(Simple, but Limited)Converts arrays to strings for comparison:
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)); // true
⚠ Limitation: Fails if elements are in different orders or contain undefined
/functions.
Compare each element individually:
function areArraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length) return false;
return arr1.every((item, index) => item === arr2[index]);
}
console.log(areArraysEqual([1, 2], [1, 2])); // true
console.log(areArraysEqual([1, 2], [2, 1])); // false (order matters)
lodash.isEqual
(Best for Complex Arrays)The Lodash library provides deep comparison:
import _ from 'lodash';
console.log(_.isEqual([1, 2], [1, 2])); // true
JSON.stringify()
(Works for Simple Objects)const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
⚠ Limitation: Fails if properties are in different orders.
function areObjectsEqual(obj1, obj2) {
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) return false;
return keys1.every(key => obj1[key] === obj2[key]);
}
console.log(areObjectsEqual({ a: 1 }, { a: 1 })); // true
lodash.isEqual
(Best for Nested Objects)console.log(_.isEqual({ a: 1 }, { a: 1 })); // true
✔ [] === []
is false
because arrays/objects are compared by reference, not content.
✔ Use JSON.stringify()
for simple comparisons (but be cautious with order/undefined
).
✔ For deep comparisons, use lodash.isEqual
or write a custom function.
✔ Primitives (5
, "hello"
) compare by value, so ===
works as expected.
Case | Best Approach |
---|---|
Simple arrays/objects | JSON.stringify() |
Order-sensitive arrays | Manual loop check |
Complex/nested objects | lodash.isEqual() |
Performance-critical | Custom comparison function |
Now you know why [] === []
is false
—and how to compare arrays & objects properly! 🚀
Recursion is a programming technique where a function calls itself to solve smaller instances of…
One of the most common errors in JavaScript is the dreaded TypeError: Cannot read property…
When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…
When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…
When starting a JavaScript project, one of the first decisions you’ll face is: Should I…
Software development is one of the most valuable skills you can learn. From building websites…