Check if two JavaScript arrays have same contents

Have you ever wanted to compare the contents of two arrays to see if they contain the same elements regardless of order? While this sounds like a fairly easy task, implementing it efficiently can be a little tricky.

Starting with the most naive solution, you can simply iterate over the first array and check if each element is present the same amount of times in the second array. You can use Array.prototype.every() and Array.prototype.filter() to achieve this.

const haveSameContents = (a, b) =>
  a.length === b.length &&
  a.every(v => a.filter(e => e === v).length === b.filter(e => e === v).length);

haveSameContents([1, 2, 4], [2, 4, 1]); // true
haveSameContents([1, 1, 2, 3], [2, 1, 1, 3]); // true

This approach is inefficient, as we might end up calculating the frequency of the same element in each array multiple times. We can minimize this by using a Set to store the unique values of both arrays and then comparing the frequency of each value in both arrays.

const haveSameContents = (a, b) =>
  a.length === b.length &&
  [...new Set([...a, ...b])].every(
    v => a.filter(e => e === v).length === b.filter(e => e === v).length
  );

haveSameContents([1, 2, 4], [2, 4, 1]); // true
haveSameContents([1, 1, 2, 3], [2, 1, 1, 3]); // true

This small change can net us a significant performance improvement, as we only calculate the frequency of each value once. It also ensures that we only iterate over the unique values of both arrays, which can be a huge performance boost for large arrays.