7 Powerful Ways to Compare JavaScript Arrays (Including Deep Equality)

Comparing arrays in JavaScript can be tricky because arrays are reference types. This article presents several methods to compare two arrays depending on the need: checking equality, finding differences, or identifying common elements.

1. Strict Equality Check (===)

Using the === operator compares the array references, not their contents. Even if two arrays contain the same elements, they are not equal unless they reference the same object.

Example:

<code>const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false</code>

Explanation: Same content but different references.

2. Compare Contents with JSON.stringify()

This method converts arrays to JSON strings and compares them. It works for simple arrays but has limitations with nested objects or unordered elements.

Example:

<code>const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)); // true</code>

Limitation: Fails if element order differs or arrays contain objects.

3. Use every() to Compare Arrays

The every() method ensures that all corresponding elements are equal. First check that the arrays have the same length.

Example:

<code>function arraysEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  return arr1.every((value, index) => value === arr2[index]);
}
console.log(arraysEqual([1,2,3], [1,2,3])); // true
console.log(arraysEqual([1,2,3], [3,2,1])); // false</code>

4. Deep Equality Check for Nested Arrays

For arrays containing nested objects or arrays, a recursive comparison is needed. Implement a deepEqual function.

Example:

<code>function deepEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  for (let i = 0; i < arr1.length; i++) {
    const val1 = arr1[i];
    const val2 = arr2[i];
    const areObjects = typeof val1 === 'object' && typeof val2 === 'object';
    if (areObjects && !deepEqual(val1, val2)) return false;
    if (!areObjects && val1 !== val2) return false;
  }
  return true;
}
console.log(deepEqual([1, [2, 3]], [1, [2, 3]])); // true
console.log(deepEqual([1, [2, 3]], [1, [3, 2]])); // false</code>

5. Find Differences Between Two Arrays

Use the filter() method to get elements present in one array but not the other.

Example:

<code>function difference(arr1, arr2) {
  return arr1.filter(el => !arr2.includes(el));
}
console.log(difference([1,2,3], [2,3,4])); // [1]
console.log(difference([2,3,4], [1,2,3])); // [4]</code>

6. Check Common Elements

Use filter() together with includes() to identify elements that exist in both arrays.

Example:

<code>function intersection(arr1, arr2) {
  return arr1.filter(el => arr2.includes(el));
}
console.log(intersection([1,2,3], [2,3,4])); // [2,3]</code>

7. Compare Unordered Arrays with Set

If order does not matter, convert arrays to Set objects and compare their sizes.

Example:

<code>function arraysEqualUnordered(arr1, arr2) {
  return arr1.length === arr2.length &&
    new Set(arr1).size === new Set(arr2.filter(el => arr1.includes(el))).size;
}
console.log(arraysEqualUnordered([1,2,3], [3,2,1])); // true
console.log(arraysEqualUnordered([1,2,3], [1,2,4])); // false</code>

8. Deep Comparison with Lodash’s isEqual()

Lodash provides the isEqual() function, which can compare arrays, objects, and nested structures.

Example:

<code>const _ = require('lodash');
console.log(_.isEqual([1,2,3], [1,2,3])); // true
console.log(_.isEqual([1, [2,3]], [1, [3,2]])); // false</code>

Choosing the appropriate method depends on the data structure and the required level of comparison; simple arrays can use JSON.stringify() or every() , while nested structures benefit from recursive functions or libraries like Lodash.