How to Compare Arrays in JavaScript

Arrays in JavaScript are everywhere because of how useful it is to store several pieces of data within a single variable.
However, sometimes it is necessary to compare arrays directly to see if they contain the same values.
In this post, we'll learn the best ways to compare different arrays in JavaScript.
How to compare arrays in JavaScript
Before we look functioning ways to compare arrays in JavaScript, let's first look at an example that doesn't work.
First let's define two arrays:
const array1 = [1, 2, 3, 4];
const array2 = [1, 2, 3, 4];
You might assume that the following code would work:
const array1 = [1, 2, 3, 4];
const array2 = [1, 2, 3, 4];
const equal = array1 === array2;
console.log(equal);
false
However, this returns false
because the ===
operator compares the reference of the arrays, not the values.
This would work in this example:
const array1 = [1, 2, 3, 4];
const array2 = array1;
const equal = array1 === array2;
console.log(equal);
true
However, this isn't very likely in a real-world scenario.
Let's look into some valid ways to compare arrays.
How to compare arrays with JSON.stringify()
The first way to compare arrays is to use the JSON.stringify()
method.
This involves turning both arrays into strings and then comparing the strings.
const array1 = [1, 2, 3, 4];
const array2 = [1, 2, 3, 4];
const equal = JSON.stringify(array1) === JSON.stringify(array2);
console.log(equal);
true
This works in simple arrays, however if the order between the elements are different, it will result in different JSON, and therefore return false
.
const array1 = [1, 2, 3, 4];
const array2 = [4, 3, 2, 1];
const equal = JSON.stringify(array1) === JSON.stringify(array2);
console.log(equal);
false
How to compare arrays with the every() method
Another way you can compare arrays is by using the every()
method.
This method returns true
only if every element in the array passes the test.
The test we can pass is a function that compares the elements of the array with the elements of the other array.
We can also do a length check to ensure that the arrays are the same length, because if they're not, we know they're not equal.
const array1 = [1, 2, 3, 4];
const array2 = [1, 2, 3, 4];
const sameLength = array1.length === array2.length;
const sameValues = array1.every((element, index) => element === array2[index]);
const equal = sameLength && sameValues;
console.log(equal);
true
This works for more complex arrays, however, the order here still matters.
If the order is different, it will return false
.
const array1 = [1, 2, 3, 4];
const array2 = [4, 3, 2, 1];
const sameLength = array1.length === array2.length;
const sameValues = array1.every((element, index) => element === array2[index]);
const equal = sameLength && sameValues;
console.log(equal);
false
How to compare arrays with the every() and includes() methods
We can use the every()
and includes()
methods to compare arrays.
This ensures that order doesn't matter, and that the arrays contain the same values.
Rather than doing a direct comparison like before, we instead check if the element exists in the other array, regardless of the order.
const array1 = [1, 2, 3, 4];
const array2 = [4, 3, 2, 1];
const sameLength = array1.length === array2.length;
const sameValues = array1.every(element => array2.includes(element));
const equal = sameLength && sameValues;
console.log(equal);
true
Conclusion
In this post, we learned how to compare arrays in JavaScript.
Your options include using JSON.stringify()
to compare the JSON strings, or using every()
and includes()
to directly compare the individual values of the arrays.
Thanks for reading and happy coding!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on X! You can also join the conversation over at our official Discord!
Leave us a message!