Compare Two Arrays in JavaScript

Comparing two Arrays in JavaScript means making sure they have the same number of elements and that those elements have the same values. This process can be more complex than it seems, and we'll explore different methods to do it.

Methods to Compare Two Arrays in JavaScript

There are many methods to compare two arrays in Javascript, we will take a look at some of them.

Equality Comparison

In Javascript comparing two objects or arrays is done by reference and not by value. This means that instead of comparing the values contained in the two arrays, Javascript checks whether they point to the same reference, which is usually not the case even if the two arrays contain the same elements. This means when comparing two arrays in JavaScript, using either the loose or tight equality operators ( that is == or ===), usually it will result in false. Let us try to understand this better by an example:

Output

As you can see in the above example even though the values of both the arrays are the same, the result of the comparison is false. This method can however be used to check if two references of an object or an array are pointing towards the same element. Let us try to understand this better by an example:

Output

Compare Arrays Using JSON.stringify()

Another method that is commonly used to compare two arrays in javascript is to use JSON.stringify(). The JSON.stringify() function in Javascript converts an object/array into a JSON string. So using this method, we can then serialize each array and compare the two serialized strings. Let us try to understand what the implementation of this solution would look like:

Output

However there are some edge cases where this solution fails, to illustrate this fact consider the following example:

Output

In this example, the arrays are shown to be equal even though they are not. The arrays differ in the value of their respective first elements. But the way the JSON.stringify() method works, it does not consider undefined or null values when converting the array into a JSON string. Hence, it just omits them which is why the strings come out to be equal. Such cases may seem very uncommon, however, they might cause some difficulty in fixing issues.

Compare Arrays Using For Loop

One of the simplest ways that can be used to compare two arrays in Javascript is to compare each and every element in both the arrays one by one. To implement this solution we first need to check whether the sizes of both the arrays which are being compared are equal or not.

1. If the sizes of the arrays are unequal then they can never be equal to each other.
2. If the sizes of both the arrays are in fact equal, we proceed to check each and every element of both the arrays.

Let us understand this better by an example:

Output

Note: The above program does not work if some of the elements of the array are objects, for example, an array like this:

Using Array.prototype.every()

As we saw earlier that the method to compare two arrays in Javascript using the JSON.stringfy() method we had to deal with some hard to decode edge cases. We can use Array.prototype.every() method on all the elements one by one to overcome these cases. Let us take a look at an example to understand this method.

Output

This method avoids the above-mentioned serialization problem. It does not, however, take into consideration nested arrays or objects. Let us try to understand this better with an example.

Output

As you can see, in this example even though all the elements, even the objects all have the same values in both the arrays, we still got an incorrect answer. Hence, to use this method with arrays that contain nested objects or arrays we must implement a recursive solution. Let us explore this method in the next section.

Using Array.prototype.every() With Recursion

The way this method will work is very similar to the previous method. The only difference is that whenever we will encounter a nested object in the arrays, we will again call this function in a recursive way for those objects and then proceed. Let us look at an example:

Output

Using Set And Array.Prototype.Filter() In Combination With A Loop

In the case where we just need to check if the contents of both the arrays are the same and are not concerned with the order of the elements, we may use this method. We use a set and Array.prototype.filter() together with a loop to check for each unique value if they appear an equal amount of times in both the arrays.

Output

Hence, you can see even though the arrays have the elements in a different order, we still got the correct answer using this method.

Your journey to becoming a certified JavaScript developer starts here. Enroll in our JavaScript course and set yourself on the path to a rewarding coding career.