Compare Two Arrays in JavaScript

Introduction

JavaScript is best known for web page development but is also used in various non-browser environments. While working on JavaScript, the most common thing you deal with is “logic.” When handling logic in the backend, we might need to compare two arrays to see if they are equal or not.

This article will discuss how to compare two arrays in JavaScript in the right way. We will go through every aspect and boundary condition too. We will use two approaches to do so. We will do it by converting arrays to strings and comparing two arrays by looping through their values.

So without any further ado. Let’s get started! 

See, Javascript hasOwnProperty

Methods to Compare Two Arrays in JavaScript

Let’s have a look at some of the methods to compare two arrays in Javascript.

Equality Comparison

How to compare two arrays in Javascript? The first thing that comes to our mind when this question shows up is, “We can use strict or loose equality operator to do this.” Well, it’s not wrong, but do you know we can’t use them here? 

Well, if you use either the loose or strict equality operators (== or ===), it will most often result in a wrong (false) answer. Even if the two arrays have the same elements in the same order. 

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

array1 === array2; // false

This is because the arrays and objects are compared by reference and not by value in JavaScript. This means this solution does not produce the desired result:

let arrayType = typeof(array1);
console.log(arrayType); //"Object"

Then how to compare two arrays in JavaScript? 

Compare Arrays Using JSON.stringify()

A standard answer to the question of how to compare two arrays in JavaScript is to use JSON.stringify(). This will allow us to serialize each array, and then we can compare the two serialized strings.

A simple implementation of this is shown below:

const equals = (array1, array2) => JSON.stringify(array1) === JSON.stringify(array2);

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

equals(array1, array2); // true

Compare Arrays Using .tostringify()

Another approach to the problem of how to compare two arrays in JavaScript is to use .toString(). As we had discussed in JSON.stringify(), this method will convert any data type to a string. And we can similarly convert an object to a string.

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

console.log(array1.toString() === array2.toString()); //true

Compare Arrays Using For Loop

In this method we'll compare each and every element of both the array one by one.

function compareArrays(arrfirst, arrsecond) {
 if (arrfirst.length !== arrsecond.length) {
   return false;
 }
 
 for (let i = 0; i < arrfirst.length; i++) {
   if (arrfirst[i] !== arrsecond[i]) {
     return false;
   }
 }
 
 return true;
}
const array1 = [3, 4, 8];
const array2 = [1, 2, 3];
const array3 = [3, 4, 8];
console.log(compareArrays(array1, array2)); 
console.log(compareArrays(array1, array3)); 

Output

false
true

Using Array.prototype.every()

In Array.prototype.every() method to compare two arrays in JavaScript. The every() method tests whether all elements in the array pass the test implemented by the provided function.

Example:

function compareArrays(arrfirst, arrsecond) {
 if (arrfirst.length !== arrsecond.length) {
   return false;
 }
 return arrfirst.every((value, index) => value === arrsecond[index]);
}
const array1 = [3, 4, 8];
const array2 = [1, 2, 3];
const array3 = [3, 4, 8];
console.log(compareArrays(array1, array2)); 
console.log(compareArrays(array1, array3)); 

Output:

false
true

Using Array.prototype.every() With Recursion

In this Array.prototype.every() With Recursion, whenever we find a nested object in the arrays, we will recursively call this function for those objects and then proceed.

Example:

function compareArrays(arrfirst, arrsecond) {
 if (arrfirst.length !== arrsecond.length) {
   return false;
 }
 return arrfirst.every((value, index) => {
   if (Array.isArray(value) && Array.isArray(arrsecond[index])) {
     return compareArrays(value, arrsecond[index]);
   } else {
     return value === arrsecond[index];
   }
 });
}
const array1 = [1, [2, 3], 4];
const array2 = [1, [2, 3], 4];
const array3 = [1, [2, 3, 4], 5];
console.log(compareArrays(array1, array2)); 
console.log(compareArrays(array1, array3)); 

Output:

true
false

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

You can use a combination of Set and Array.prototype.filter() with a loop to compare two arrays in JavaScript. 

Example: 

function compareArrays(arrfirst, arrsecond) {
 if (arrfirst.length !== arrsecond.length) {
   return false;
 }
 const set1 = new Set(arrfirst);
 const filteredArr2 = arrsecond.filter((value) => set1.has(value));
 return arrfirst.length === filteredArr2.length;
}
const array1 = [3, 4, 8];
const array2 = [1, 2, 3];
const array3 = [3, 4, 8];
console.log(compareArrays(array1, array2));
console.log(compareArrays(array1, array3)); 

Output: 

false
true