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!

• Support Us
• Join
• Share
• Post
• Share