Sometimes we need to get the difference between 2 JavaScript arrays.
The difference is the item in one array that’s not in the other.
In this article, we’ll look at how to get various kinds of differences between 2 arrays in JavaScript.
Intersection
The intersection between 2 arrays is a set of items that are in both arrays.
To get the intersection, we can use the filter method.
We can write:
const arr1 = ['a', 'b'];
const arr2 = ['a', 'b', 'c', 'd'];
const intersection = arr1.filter(x => arr2.includes(x));
console.log(intersection)
to computer the intersection.
We have 2 arrays, arr1 and arr2 .
And we compute the intersection by calling filter on arr1 with a callback that checks whether the item x from arr1 is also included with arr2 .
We can switch arr1 and arr2 in the 3rd line and get the same result.
For instance, we can write:
const arr1 = ['a', 'b'];
const arr2 = ['a', 'b', 'c', 'd'];
const intersection = arr2.filter(x => arr1.includes(x));
console.log(intersection)
In both cases, intersection is [“a”, “b”] .
Difference Between 2 Arrays
The difference between 2 arrays is an array of all the items that are available in one array but not the other.
For instance, if we have arr1 and arr2 like we have above, we can get all the items from arr2 that isn’t in arr1 by writing:
const arr1 = ['a', 'b'];
const arr2 = ['a', 'b', 'c', 'd'];
const intersection = arr2.filter(x => !arr1.includes(x));
console.log(intersection)
All we did is change the filter callback to check whether item x in arr2 is included in arr1 or not.
If they aren’t then we include it in the intersection array.
Therefore, intersection is [“c”, “d”] .
Symmetric Difference Between 2 Arrays
The symmetric difference between 2 arrays is the set of items that are in either array but not both.
To compute the symmetric difference, we can write:
const arr1 = ['a', 'b', 'e'];
const arr2 = ['a', 'b', 'c', 'd'];
const symDiff = [...new Set([...arr1, ...arr2])].filter(x => (!arr1.includes(x) && arr2.includes(x)) || (arr1.includes(x) && !arr2.includes(x)))
console.log(symDiff)
We put all the array items into a set by passing an array with both the entries from arr1 and arr2 in it into the Set constructor.
This will remove any duplicate elements from the combined arrays.
Then we convert the set back to an array with the outer spread operator.
And then we call filter on that with:
(!arr1.includes(x) && arr2.includes(x)) || (arr1.includes(x) && !arr2.includes(x))
returned by the callback to get all the elements that are only in arr1 or only in arr2 .
Therefore, symDiff should be [“e”, “c”, “d”] .
Conclusion
We can compute various kinds of differences between arrays with sets and array methods.
