What is happening in this "Diff Two Arrays" solution?

JavaScript
1

Tell us what’s happening:

I tried solving it with for loops but I failed. So I looked at the FCC solution, and it seems simple, just a concat() and a filter() method, but I’m having trouble understanding what is going on.

The concat() method combines arr1 and arr2, but then the filter() method seems too complicated. Why is it checking both arr1 and arr2 for item? weren’t the two arrays concatenated? If it’s checking both arrays, why concatenate? … Please help me understand this.

Your code so far


function diffArray(arr1, arr2) {
return arr1
.concat(arr2)
.filter(item => !arr1.includes(item) || !arr2.includes(item));
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Diff Two Arrays

Link to the challenge:

2

The concatenation puts all of the ‘items’ to be checked into a single array and then the filter method creates a new array by looping over the concatenated array, comparing each item in the concatenated array to both arr1 and arr2 according to the conditional, filtering out all of the ‘items’ that don’t meet the condition and keeping those that do.

According to MDN Docs:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.