Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Compare Two Arrays in JavaScript?
In JavaScript, comparing arrays with == or === operators doesn't work as expected because they compare object references, not actual array contents. This article explores multiple effective methods to properly compare two arrays in JavaScript.
When we try to compare arrays directly, JavaScript compares memory references rather than the array elements themselves, which typically results in false even for identical arrays.
Why Direct Comparison Fails
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
document.getElementById("result").innerHTML =
"arr1 === arr2: " + (arr1 === arr2) + "<br>" +
"arr1 == arr2: " + (arr1 == arr2);
</script>
</body>
</html>
arr1 === arr2: false arr1 == arr2: false
Method 1: Using for Loop
The traditional approach iterates through each element and compares them individually. This method provides full control over the comparison logic.
<!DOCTYPE html>
<html>
<body>
<div id="res1"></div>
<div id="res2"></div>
<script>
function compareArrays(a1, a2) {
if (a1.length !== a2.length) {
return false;
}
for (let i = 0; i < a1.length; i++) {
if (a1[i] !== a2[i]) {
return false;
}
}
return true;
}
const x = [2, 4, 7, 9];
const y = [2, 4, 7, 9];
const w = [2, 3, 5, 7];
const z = [2, 4, 3, 1];
const result1 = compareArrays(x, y);
const result2 = compareArrays(w, z);
document.getElementById("res1").innerHTML =
"Arrays [" + x + "] and [" + y + "] are " +
(result1 ? "equal" : "different");
document.getElementById("res2").innerHTML =
"Arrays [" + w + "] and [" + z + "] are " +
(result2 ? "equal" : "different");
</script>
</body>
</html>
Arrays [2,4,7,9] and [2,4,7,9] are equal Arrays [2,3,5,7] and [2,4,3,1] are different
Method 2: Using JSON.stringify()
This method converts arrays to JSON strings and compares them. It's simple but has limitations with complex data types and element order.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const arr3 = [2, 4, 9, 7];
const isEqual1 = JSON.stringify(arr1) === JSON.stringify(arr2);
const isEqual2 = JSON.stringify(arr1) === JSON.stringify(arr3);
document.getElementById("result").innerHTML =
"arr1 vs arr2: " + isEqual1 + "<br>" +
"arr1 vs arr3: " + isEqual2;
</script>
</body>
</html>
arr1 vs arr2: true arr1 vs arr3: false
Method 3: Using every() Method
The every() method provides a functional approach to array comparison, testing whether all elements pass a given condition.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const arr3 = [2, 4, 7];
function arraysEqual(a, b) {
return a.length === b.length &&
a.every((val, index) => val === b[index]);
}
document.getElementById("result").innerHTML =
"arr1 equals arr2: " + arraysEqual(arr1, arr2) + "<br>" +
"arr1 equals arr3: " + arraysEqual(arr1, arr3);
</script>
</body>
</html>
arr1 equals arr2: true arr1 equals arr3: false
Method 4: Using Set for Unique Elements
This approach combines arrays and uses Set to check for unique elements. It works well when order doesn't matter.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const arr3 = [2, 4, 7, 8];
function arraysEqualSet(a, b) {
return a.length === b.length &&
new Set([...a, ...b]).size === a.length;
}
document.getElementById("result").innerHTML =
"arr1 equals arr2: " + arraysEqualSet(arr1, arr2) + "<br>" +
"arr1 equals arr3: " + arraysEqualSet(arr1, arr3);
</script>
</body>
</html>
arr1 equals arr2: true arr1 equals arr3: false
Method 5: Using join() Method
The join() method converts arrays to comma-separated strings for comparison. Simple and effective for primitive data types.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const arr3 = [2, 4, "7", 9];
const isEqual1 = arr1.join(',') === arr2.join(',');
const isEqual2 = arr1.join(',') === arr3.join(',');
document.getElementById("result").innerHTML =
"arr1 vs arr2: " + isEqual1 + "<br>" +
"arr1 vs arr3 (string '7'): " + isEqual2;
</script>
</body>
</html>
arr1 vs arr2: true arr1 vs arr3 (string '7'): true
Comparison of Methods
| Method | Order Matters | Type Sensitive | Performance | Best For |
|---|---|---|---|---|
| for Loop | Yes | Yes | Fast | Custom logic |
| JSON.stringify() | Yes | Yes | Medium | Simple arrays |
| every() | Yes | Yes | Fast | Functional approach |
| Set | No | Yes | Medium | Unordered comparison |
| join() | Yes | No | Fast | String conversion OK |
Conclusion
Choose the appropriate method based on your specific needs: use every() for most cases, JSON.stringify() for simplicity, or custom loops for complex comparison logic. Each method has trade-offs regarding performance, type sensitivity, and order requirements.
720 Views
