Diff two arrays

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

Hello:) I understand what concat and filter does but I cannot follow the logic what is happening then . Can sb help me pls?

2

So first, since you understand concat, tell us, what will concat return in this piece of code? (Be as precise as you can be when explaining it)

3

You use concat to merge two arrays together. In this case arr1 and arr2.
let arr = arr1.concat(arr2);
gives this: [ 1, 2, 3, 5, 1, 2, 3, 4, 5 ]
Then you call filter on that array.

1 Like
4

Can you explain in the same way what the filter method does here?

5

The filter method creates a new array filled with elements that pass the test.
In this case:
let arr = arr1.concat(arr2).filter((item){here is the code that I don`t get })

6

So if you break down the test a bit, and explain each part?

!arr1.includes(item)

||

!arr2.includes(item)
7

|| : this is a logical operator, meaning OR (Returns true if at least one of the operands is true.)
! : it means not and returns true if the operand is false, and vice versa.
icludes method: returns true if a string contains a specified string.

What I think it does that the elements are going in one by one into

arr1.includes(item)

and checking if arr1 array includes all of the elements through item.
I get sth wrong cause item already has all arr1 and arr2 elements through concat. So if you are checking against this data it will include arr1 and arr2 anyway.
Then it will jump to the arr2.includes(item) and executes it.

8

wrong includes, as arr1 and arr2 are arrays

includes check if the array includes the argument
so arr1.includes(item) is checking if arr1 includes item

so for each single element, arr1.includes(item) will return true if the item is present, and false otherwise, which is flipped around with !

so item can be included in both arr1 and arr2 or in only one of them

arr1.includes(item) !arr1.includes(item) arr2.includes(item) !arr2.includes(item) !arr1.includes(item) || !arr2.includes(item)
true false false true true
false true true false true
true false true false false

the last column, the one for the full expression, is the one with the value given to the filter function and determines which numbers are kept, and which are not

1 Like
9

Thanks for this. I still do not get how it can see the difference between arr1 and arr2 by checking them against their combined data.

10

I got it now, thanks:)

11

3, 4, 5]);

[/quote]

Hello there,

So in the in the code posted you are working with .concat, .filter() and includes()

Lets take them one by one:

so in the first part of our return statement we have 
return arr1.concat(arr2)
This part will return a new array that consists of all the elements present in array1 and all the elements present in arr2 [1,2,3,5,1,2,3,4,5]

On the second part of the expression we are filtering this result 
So basically we are executing this:
[1, 2, 3, 5, 1, 2, 3, 4, 5].filter(item => !arr1.includes(item) || !arr2.includes(item));|
we are taking each item and checking if the item is not included in arr1 or not included in arr2. If ONE of the two conditions is met , then we return an array that with that item. 
Remember arr1 was [1,2,3,5] and arr2 was [1,2,3,4,5]  

so lets take the number 1  and apply the  filter ,
arr1 includes the number 1 however the ! at the start of the check negates this so the first condition of our OR statement  is not met. Then  similarly with the second part. arr2  also has the number 1 in it but the ! negates the result so it is a falsie result. Our iteration  moves to the next one.

When the iteration comes to the number 4 though it checks if the number 4 is included in the arr1 which is not and then our ! at the beginning  reverses this result to true. Our iteration will then add the number 4 to the array

Only the values not shared between the two arrays are returned.
In this case, the result is:
[4]

So overall, the function returns the symmetric difference between two arrays — the values that are in one array but not both.
1 Like
12

Thanks, that is clearcut:)