Blog

To find the difference between two arrays in JavaScript, you can use the following methods –

1. Array.prototype.filter() and indexOf() method
2. Array.prototype.filter() and includes() method
3. Set object
4. jQuery methods
5. Underscore/Lodash library

Find The Difference Between Two Arrays In JavaScript

Let’s look at these methods one by one, but let’s first start by understanding what difference means in this context.

Different values in arrays can be of the same type or different types. In case of primitive data types, difference is defined as the elements that are present in one array but not in the other. In case of reference data types like objects and arrays, two instances are considered equal if they have the same properties with the same values.

For example, let’s consider two arrays –

var array1 = [‘a’, ‘b’, ‘c’];

var array2 = [‘b’, ‘c’];

Here, the difference between array1 and array2 is –

[‘a’]

The order of elements in the output array is not important. In other words, it doesn’t matter if the element ‘a’ is at index 0 or index 2 in the output array.

Similarly, let’s consider two more arrays –

var array1 = [‘a’, ‘b’, ‘c’];

var array2 = [‘c’, ‘a’];

In this case as well, the difference between array1 and array2 is –

[‘b’]

The order of elements in the output array is not important. In other words, it doesn’t matter if the element ‘b’ is at index 0 or index 1 in the output array.

Now that we have a clear understanding of what difference means in this context, let’s look at the different methods that can be used to find the difference between two arrays.

Array.prototype.filter() And indexOf() method

You can use the Array.prototype.filter() method to create a new array from the existing array, excluding the elements which are present in both arrays. Then, use the indexOf() method to find the index of all elements which are present in the first array, but not in the second array.

Example:

var arr1 = [‘a’, ‘b’, ‘c’, ‘d’];

var arr2 = [‘b’, ‘c’];

arr1.filter(function(element) {

  return arr2.indexOf(element) === -1; // include only those elements which are not present in arr2

}).forEach(function(element) { // print only those elements which are not present in arr2

  console.log(element);

});

Output:

a

d

Array.prototype.filter() And includes() method

Instead of using the indexOf() method, you can use the includes() method to find the index of all elements which are present in the first array, but not in the second array.

Example:

var arr1 = [‘a’, ‘b’, ‘c’, ‘d’];

var arr2 = [‘b’, ‘c’];

arr1.filter(function(element) {

  return !arr2.includes(element); // include only those elements which are not present in arr2

}).forEach(function(element) { // print only those elements which are not present in arr2

  console.log(element);

});

Output:

a

d

Set Object

You can convert one array into Set object and then use the difference() method to find the difference between two arrays in JavaScript.

Example:

var arr1 = [‘a’, ‘b’, ‘c’, ‘d’];

var arr2 = [‘b’, ‘c’];

var set2 = new Set(arr2);

var difference = [...arr1].filter(x => !set2.has(x))); // find elements which are present in set1, but not in set2

console.log(Array.from(difference)); // convert the difference back to an array

Output:

[“a”, “d”]

jQuery methods

If you are already using jQuery in your project, then you can use the $.grep() and $.inArray() methods to find the difference between two arrays in JavaScript.

Example:

var arr1 = [‘a’, ‘b’, ‘c’, ‘d’];

var arr2 = [‘b’, ‘c’];

$.grep(arr1, function(element) {

  return $.inArray(element, arr2 ) < 0; // include only those elements which are not present in arr2

}).forEach(function(element) { // print only those elements which are not present in arr2

  console.log(element);

});

Output:

a

d

Underscore.js methods

If you are already using Underscore.js in your project, then you can use the difference() method to find the difference between two arrays in JavaScript. The difference() method returns the values from arr1 which are not present in arr2.

Example:

var arr1 = [‘a’, ‘b’, ‘c’, ‘d’];

var arr2 = [‘b’, ‘c’];

console.log(_.difference(arr1, arr2)); // find elements which are present in arr1, but not in arr2

Output:

[“a”, “d”]

Conclusion

As you can see from the above examples, there are many ways to find the difference between two arrays in JavaScript. Which method you choose will depend on the requirements of your project.

I hope you found this article helpful. Happy coding!