[How To] find difference between two arrays in JavaScript

Finding the difference between two arrays in JavaScript can be a bit tricky if you are unfamiliar with the language. Especially if one or both of the arrays contain objects or nested arrays. In this blog post we will look at how to use the JavaScript built-in methods to find the difference between two arrays.

As an example, consider two arrays:

let arr1 = [1, 2, 3, 4, 5]; let arr2 = [3, 4, 5];

To find the difference between these two arrays, we can use JavaScript’s native array methods.

The simplest way to find the difference between two arrays is to use the Array.filter() method. This method creates a new array containing only the elements that meet a certain criteria. By using the not operator (!) we can reject any elements present in arr2 from arr1. Then we can use the Array.concat() method to join the two arrays, thus creating a new array containing only the elements in arr1 that are not in arr2.

In our case, it would look something like this:

let difference = arr1.filter(el => !arr2.includes(el)).concat(arr2.filter(el => !arr1.includes(el)));

console.log(difference); // Result: [1, 2, 3, 4, 5]

The results should include the elements of arr1 that are not in arr2 and the elements of arr2 that are not in arr1. In our case, it returns [1, 2, 3, 4, 5], meaning the difference between the two arrays is [1, 2].

Another way to find the difference between two arrays is to use the Array.reduce() method. This method works by applying a callback function to each element of an array and accumulating the result into a single value. Using this method, we can compare the array’s elements to those of another and accumulate those elements in the new array.

In our example, it would look like this:

let difference = arr1.reduce((acc, curr) => { if (!arr2.includes(curr)) { acc.push(curr); } return acc; }, []);

console.log(difference); // Result: [1, 2]

The result is the same as with the first method, [1, 2].

Finally, if the two arrays contain objects or nested arrays, then we need to use a more complex approach. We can use the lodash library to help with this. It provides a powerful utility that can efficiently compare objects in nested arrays.

For our example above, we would use the differenceWith() method provided by lodash. This method accepts two arrays and a comparison function as arguments. It will then compare the objects in the two arrays and return a new array with the subset of elements from the first array that do not occur in the second.

In our example, it would look like this:

let difference = _.differenceWith(arr1, arr2, _.isEqual);

console.log(difference); // Result: [1, 2]

This returns the same result as the first two methods, [1, 2], meaning the difference between the two arrays is [1, 2].

We have now seen how to use the various JavaScript built-in methods to find the difference between two arrays. This can be very useful when writing programs that need to work with data sets that could potentially contain duplicates.