Compare Two Arrays for Equality in JavaScript
In JavaScript, checking if two arrays are equal is not as simple as using ==
or ===
. Why? Because arrays are reference types, and comparing them directly will only check if they point to the same memory location—not if they contain the same values.
For example, ["apple", "banana"] === ["apple", "banana"]
returns false
, even though both arrays look identical. In this tutorial, we’ll explore beginner-friendly, reliable ways to compare two arrays based on their content—element by element.
Method 1: Using JSON.stringify()
This is one of the simplest ways to compare arrays in JavaScript. It converts both arrays to strings and then compares those strings. It works well for shallow arrays with primitive values like strings and numbers.
const arr1 = ["apple", "banana", "cherry"];
const arr2 = ["apple", "banana", "cherry"];
const areEqual = JSON.stringify(arr1) === JSON.stringify(arr2);
console.log(areEqual);
true
Method 2: Using Array.prototype.every()
With Length Check
For better control and deeper understanding, you can write a function that checks if arrays are the same length and if each corresponding element is equal. This works great for shallow comparisons and avoids issues with serialization.
function arraysEqual(a, b) {
if (a.length !== b.length) return false;
return a.every((val, index) => val === b[index]);
}
const fruits1 = ["apple", "banana", "cherry"];
const fruits2 = ["apple", "banana", "cherry"];
console.log(arraysEqual(fruits1, fruits2));
true
Method 3: Comparing Arrays With Different Orders
If order doesn’t matter, you can sort the arrays before comparing. This is useful in cases like matching shopping cart items or tag lists where sequence is not important.
const list1 = ["banana", "cherry", "apple"];
const list2 = ["apple", "banana", "cherry"];
const areSameUnordered = JSON.stringify(list1.sort()) === JSON.stringify(list2.sort());
console.log(areSameUnordered);
true
Method 4: Deep Comparison Using Recursion (Advanced)
If you're comparing nested arrays or arrays with objects, you'll need a recursive approach. This is more advanced, but very powerful. Libraries like Lodash provide _.isEqual()
for this, but here’s how you can write your own basic version:
function deepEqual(a, b) {
if (Array.isArray(a) && Array.isArray(b)) {
if (a.length !== b.length) return false;
return a.every((val, i) => deepEqual(val, b[i]));
}
return a === b;
}
const nested1 = ["apple", ["banana", "cherry"]];
const nested2 = ["apple", ["banana", "cherry"]];
console.log(deepEqual(nested1, nested2));
true
Which Method Should You Use?
It depends on the complexity of your data:
- ✅ Use
JSON.stringify()
for quick checks on simple arrays with strings or numbers. - ✅ Use
every()
withlength
check when you want more control and readability. - ✅ Sort then compare if order doesn’t matter and data is primitive.
- ✅ Use recursion or a library like Lodash for nested or complex structures.
Final Thoughts
Comparing arrays for equality may seem like a small task, but it reveals deeper truths about how JavaScript handles references, memory, and object structures. Once you move beyond primitives and deal with real-world data—like cart items, search filters, or API responses—you’ll find these techniques extremely useful.
Pick the right method based on your use case, and don’t forget to test against edge cases like empty arrays, different types, or mismatched lengths. With these tools in your toolbox, you’ll be well-equipped to build more robust and accurate code.
Comments
Loading comments...