How to Compare Values of Two Arrays in JavaScript

Comparing two arrays in JavaScript to determine if they hold the same values can be trickier than it initially appears. Using loose (==) or strict (===) equality operators directly on arrays won’t work as expected because they compare references, not values. This article explores various techniques to effectively compare array values in JavaScript.

Understanding the Challenge: Reference vs. Value

JavaScript arrays are objects. When comparing objects with == or ===, the comparison checks if the variables refer to the same object in memory, not whether their content is identical.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

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

Even though array1 and array2 contain the same values, they are distinct objects in memory. Hence, the comparison returns false. Comparing individual elements works as expected:

console.log(array1[0] == array2[0]);  // true

However, element-by-element comparison is inefficient for larger arrays. We need methods to compare the entire array content at once.

Comparing Arrays by String Conversion

One common approach is converting arrays to strings before comparison. Two methods facilitate this:

1. Using JSON.stringify()

This method serializes the array into a JSON string. Comparing the resulting strings provides a quick way to check for value equality.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); // true

// Reusable function for comparison
const compareArrays = (a, b) => JSON.stringify(a) === JSON.stringify(b);

2. Using toString()

The toString() method converts the array into a comma-separated string of its elements.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

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

// Reusable comparison function
const compareArrays = (a, b) => a.toString() === b.toString();

Note: JSON.stringify() is generally preferred as it explicitly serializes the array structure. toString() might yield unexpected results for complex nested arrays. However, both methods have limitations when dealing with null and undefined values.

Iterative Comparison for Accuracy

String conversion methods fail to differentiate between null and undefined. A more robust approach involves comparing array lengths and then iterating through elements for individual comparisons.

1. Using every()

The every() method checks if all elements in an array satisfy a given condition.

const compareArrays = (a, b) => 
  a.length === b.length && a.every((element, index) => element === b[index]);


let array1 = [11, null, 33];
let array2 = [11, undefined, 33];

console.log(compareArrays(array1, array2)); // false

This method accurately distinguishes between null and undefined, providing a more reliable comparison.

2. Using a for Loop

A for loop provides a more explicit way to iterate and compare elements.

const compareArrays = (a, b) => {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
};

Both iterative methods first check for equal lengths. If lengths differ, the arrays cannot be equal.

Conclusion

Choosing the right comparison method depends on the specific requirements. String conversion provides a quick but less accurate solution. Iterative comparison using every() or a for loop offers greater accuracy, especially when dealing with null and undefined. Understanding these techniques allows developers to confidently compare array values in various scenarios.