Compare 2 or more JS arrays

Sometimes can be useful an efficient way to compare more JS arrays of objects or primitives. In these cases, the simple comparison operator is not enough because arrays are two different instances of objects. We have to compare JS arrays that are lists and not simple objects.

Manipulating data often involves comparing values and structures. Arrays, as fundamental building blocks, frequently require comparison. This article delves into various methods for comparing 2 or more JS arrays, equipping you with the knowledge to tackle diverse comparison scenarios.

Understanding the challenge of comparing JS arrays

Comparing arrays isn’t solely about comparing their elements. It also involves assessing their length, order, and the equality of individual elements. The appropriate method depends on whether you need a shallow comparison (comparing references) or a deep comparison (comparing element values).

For example the following comparison will give an erroneously wrong result:

[true, false, true, false] == [true, false, true, false] // false

The solution is to first check the length and consistency of both arrays under consideration and then check the objects in them.
First we consider the version suitable for javascript, through a function.

  /**
   * Compare 2 given arrays.
   * @param a1
   * @param a2
   */
function compareArrays(a1, a2) {
    if (!a1 && !a2 && a1.length !== a2.length) {
      return false;
    }
    return !a1.some((v, i) => (v !== a2[i]));
}

The one below is the typed method (suitable for typescript frameworks: Angular, React, etc.):

  /**
   * Compare 2 given arrays.
   * @param a1
   * @param a2
   */
  public static compareArrays(a1: any[], a2: any[]): boolean {
    if (!a1 && !a2 && a1.length !== a2.length) {
      return false;
    }
    return !a1.some((v, i) => (v !== a2[i]));
  }

The result will be the following, using our function to compare js arrays:

compareArrays([true, false, false], [true, false, false]); // true
compareArrays([true, false, false, false], [true, false, false]); // false
compareArrays(['equal', false, false, false], ['equal', false, false, false]); // true
compareArrays(['different', false, false, false], ['equal', false, false, false]); // false

Specialized Libraries

• Lodash _.isEqualWith(): Provides a customizable deep comparison with a callback function for element-wise comparison.
• DeepEqual.js: Offers efficient deep comparison algorithms with various options.

Choosing the Right Method

• For basic checks on shallow equality, use === or Object.is(). They not work on elements in arrays but only with the same instance.
• For deep comparisons of simple arrays, consider lodash’s isEqual() or recursive comparison.
• For extensive deep comparisons or specialized needs, explore dedicated libraries.

Additional Considerations

• Be mindful of object order when comparing objects within arrays, as some methods disregard order (e.g., JSON.stringify()).
• For performance-critical scenarios, choose efficient methods like Lodash or DeepEqual.js.
• Always test your chosen comparison method thoroughly to ensure it meets your specific requirements.

Conclusion on comparing JS arrays

Comparing arrays in JavaScript demands a nuanced approach considering the desired depth and performance needs. This article equips you with a spectrum of comparison techniques, empowering you to choose the most suitable method for your diverse JavaScript endeavors. Remember, understanding the nuances of array comparison ensures your code operates accurately and efficiently in the world of data manipulation.

That’s all.
Try it at home!