JavaScript

How to compare two arrays in JavaScript

To compare two variables in JavaScript we use the equality operator which is of two types. The first is the double equals “==” that checks two operands values and the second is the triple equals “===” which checks the value as well as the data type of the operands.

However, we cannot use the equality operator for comparing the arrays. The reason behind this is that JavaScript array is an object type and objects are compared based on the references of the variables and not on the values.

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

console.log(array1 === array2); // false

console.log(array1 == array2); // false

In the above code, we have initialized two arrays that are the same. However, in the output we will see false:

Hence to solve this problem, in this post, we will learn a couple of ways to compare two arrays in JavaScript.

Method 1: toString()

The toString() method is an inbuilt method of JavaScript that converts any data type like integer to a string and then returns that integer number as a string. We can apply the toString() method on an array, which will convert the array into a string and then compare the string with the other string.

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
const array3 = [4, 5, 6];
 
console.log(array1.toString() == array2.toString()); // true
 
console.log(array1.toString() === array3.toString()); // false

In the above code, we initialized three arrays and then we applied the toString() method on the arrays and first compared the array1 to array2 and returned the result in the console. In the same manner, we compared array1 to array3 and console log the result:

From the above output, we can see that “array1” is equal to “array2” but “array1” is not equal to “array3”.

Method 2: Using for loop

Let us go through another method in which we will manually check the elements of two arrays and then generate an output. For this purpose, let me show you the code first:

function compareArrays() {
    const array1 = [1, 2, 3];
    const array2 = [4, 5, 6];
    // First, check the length of both arrays
    // if length is not equal then arrays are different
    if(array1.length!=array2.length)
        return "False";
    else {
        // check every element of the two arrays
        for(var i=0;i<array1.length;i++)
            if(array1[i]!=array2[i])
                return "False";
            return "True";
        }
}
console.log(compareArrays()); // false

In the above code, we have defined a function where we initialized two arrays first. Afterwards, we set a condition to check the length of the arrays.

If the two arrays’ length is not equal then that means the two arrays are different hence the function will return false.

However, if the length is the same then we have set a for loop where we will check every element of both the arrays. If even one element is not equal then False will be returned. If all the elements of both arrays are matched then it will return true.

The output of the above code is shown below:

If we change the code a little bit by providing two arrays that are equal e.g:

function compareArrays() {
    const array1 = [1, 2, 3];
    const array2 = [1, 2, 3];
    // Check length of both arrays
    // if length not equal then arrays are different
    if(array1.length!=array2.length)
        return "False";
    else {
        // check every element of the two arrays
        for(var i=0;i<array1.length;i++)
            if(array1[i]!=array2[i])
                return "False";
            return "True";
        }
}
console.log(compareArrays()); // true

The following output will be generated:

Conclusion

We cannot compare two arrays in JavaScript using the equality operator == or === because JavaScript arrays are objects and hence reference is checked and not values. For this purpose, we defined two methods in this post to compare arrays. In the first method, we used the built-in method toString() where we converted the arrays to string first and then checked the two returned strings using the equality operator. In the second method, we first manually checked the length and then compared all the elements of the two arrays one by one using the for loop.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.