Compare Elements of Two Arrays in JavaScript

featured Image

In this article, we will see how to write a program that will compare two arrays in JavaScript.

To compare two JavaScript Arrays, we have to check the following:

  1. The length of both the arrays should be same.
  2. The items in both the arrays must be of same type.
  3. The items in both arrays should be of same order number. (Optional)

So, in this article, we will see three ways to compare arrays using JavaScript in-built methods.

Using JSON.stringify() method to compare arrays

The JSON.stringify() method converts JavaScript object or value to JSON string.

Here, we will use stringify to convert both arrays to strings and then compare them for equality.

Example:

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let isEqual = JSON.stringify(arr1) === JSON.stringify(arr2);
console.log(isEqual);

Output:

true

Using toString() method to compare arrays in JS

The toString() method is use to convert any number to a string.

We can use toString() to convert the arrays to strings and compare them.

Let’s see an example:

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let isEqual = arr1.toString() === arr2.toString();
console.log(isEqual);

Output:

true

Compare Arrays using every() method in JavaScript

The every() method in JavaScript test whether every element of a given array satisfies a given condition when it is executed.

If it satisfies the given condition, it will return true, else it will return false.

Lets see every() in action:

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let isEqual = arr1.length === arr2.length &&
 arr1.every((val, index) => val === arr2[index]);
console.log(isEqual);

Output:

true

NOTE :

JSON.stringify(), toString() and every(), all these methods will not work or will return false, if the order of the items in both arrays are different.

Example: [1, 2, 3, 4] and [2, 1, 3, 4] will return false when compared.

So if you want to compare two arrays with out of order elements check the solution below.

Compare Two Arrays Regardless of Orders

To compare two arrays with elements in different orders, we will use every() and includes() method together.

The Array.includes() method check if certain element is present or not in a given array.

Let’s see an example where we first check if the length of the arrays are same or not and then check if the arrays have same elements regardless of the order.

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 4, 5];
let isEqual = arr1.length === arr2.length &&
 arr1.every((val, index) => arr2.includes(val));
console.log(isEqual);

Output:

true

In the above code, you can see even if the order of the elements in the arrays are different it have return true.

Using Lodash and Underscore library

We can also compare arrays in JavaScript using Lodash or Underscorejs.

Lodash and underscore are JavaScript library which provides us with many utility functions to ease our task.

Syntax:

_.isEqual(array1,array2)

Lets see how to use lodash to compare two arrays:

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
console.log(_.isEqual(arr1,arr2)) // true

In Lodash too, order of the element matters.

Example:

_.isEqual([1, 2, 3] , [3, 2, 1]) // false

It will return false.

So to solve this issue, we can sort the array first and then compare it. Example:

 _.isEqual([1, 2, 3].sort(),[3, 2, 1].sort()) // true

Related Topics:

Merge Two Arrays And Remove Duplicates – JavaScript

Related Posts

featured Image

Get the 10 characters from a string using JavaScript.

Here, in this article we will learn how to get the first 10 character from any string using JavaScript. Here we will be using JavaScript’s String method substring. What is…

Read more
featured Image

Convert date to long date format using JavaScript

In this article we will look into how to convert a date to a long date format using JavaScript. To convert it to a long format we will be using…

Read more
featured Image

Prevent body from scrolling when a modal is opened

Here, in this article, we will learn how to prevent the body from scrolling when a modal or a pop-up is opened using JavaScript. The scroll event is not cancelable….

Read more