Diff Two Arrays .filter() method

JavaScript
1

Tell us what’s happening:
I’m looking at solution 2 for this problem:

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]);

I don’t understand how the .filter method is working here. Can someone explain plz. Specifically is the arr1.includes the arr1 before its concatenated with arr2…? Even if that’s true I don’t understand. I’m seeing if an array includes its own elements…I don’t I’m missing stuff here. I understand the basics of .includes but not in the context where I don’t know what the array i’m applying or the values im applying. I tried to use the steps in chrome/firefox debugger but I don’t know how to get them to work…they are just blank or google’s i can’t even figure out where the heck it is. ctrl+shift+p then i paste the finished code in console and I get the desired output…then I have no idea how to access the steps to view whats going on.

Challenge: Diff Two Arrays

Link to the challenge:

2

you have various methods concatenated
so first you have arr1.concat(arr2) and that makes an array of the elements from both arr1 and arr2

now on this array containing all the elements the filter method is used with condition !arr1.includes(item) || !arr2.includes(item) which means “keep this number if it not included in arr1 OR if it is not included in arr2”

3

Can you expand on the ‘arr1.includes(item)’ part specifically. What it means in detail? I don’t understand what the arr1 is…if I understood correct it’s […arr1…arr2]; and the item is…? the elements of arr1…? see, that can’t be right.

4

filter is an array method that takes a callback function as argument, and will keep the elements that passed in the callback returns true and not keep the elements that return false

includes is an array method that returns true if the element is included in the array, and false otherwise

5

I’m looking for information in regards to this specific usage, I’ve readup on each method many times and am aware of their general usage. Like I said, it’s “what specifically” they are being applied to that has me confused, thus a written-out ‘step-in’ debug explanation would be most useful probably, a partly done one anyways since the iteration is redundant.

6

arr1.concat(arr2) makes an array containing all the elements from the two arrays
it could also have been [...arr1, ...arr2].filter(...) and it would have had the same effect
then each of these elements is tested by the filter method with !arr1.includes(item) || !arr2.includes(item)
this is true for an element if it is not included in arr1 (the ! flip the boolean value) OR (||) if it is not included in arr2
the only number for which this returns true is the 4
!arr1.includes(4) || !arr2.includes(4) -->!false || !true ---> true || false --> true
everything else is discarded as it is included in both arrays and the result is [4]

1 Like
7

Ohhkay I got it now, thanks.
I thought arr1.concat(arr2) automatically changed arr1 to now equal […arr1,…arr2] like .splice() and other methods do. Item is each element of […arr1,…arr2], and arr1 is just the original unchanged arr1 input [1,2,3,5].

Is there a way to know/identify whether an array method will automatically change the array it’s applied to without re-assignment? i.e. arr.splice() will change arr automatically; arr.concat(arr2) only does anything when its assigned to a variable like newArr=arr.concat(arr2) or its returned. So how would I know which way an array method works outside of trial and error…? Is there some kind of tag that is used to identify this difference?

8

read the documentation on the method, it is the only way

1 Like