array.filter() removes values in a function expression but not in arrow function

Question

I'm solving a problem where a function array_diff returns values in arraya that are also in array b.

Since I've been learning about named function expressions being better for console debugging than anonymous fat arrow functions, I'm trying to solve this problem with named removeDuplicate function to filter my array.

However, I am not able to prevent the filter function from automatically removing the falsey value 0 from my returned array.

Named function expression:

function array_diff(a, b) {
  return a.filter(function removeDuplicate(x) { if(b.indexOf(x) == -1) return x; });
}

array_diff([0,1,2,3,4],[2,4]); // [1, 3]

Anonymous Fat Arrow function:

function array_diffTwo(a, b) {
  return a.filter((x) => { return b.indexOf(x) == -1 });
}

array_diffTwo([0,1,2,3,4],[2,4]); // [0, 1, 3]

Can someone explain to me why the falsey value 0 is removed in array_diff and not array_diffTwo?

are you sure your example is correct? both look like named anonymous functions. — Sebastián Espinosa, Jan 28 '20 at 06:00
because you are returning `0` which is a falsy value, so `if(b.indexOf(x) == -1) return x;` finds `0` in your array and returns it (returns false) then the `0` is removed/filtered out, unlike with `return b.indexOf(x) == -1` which will always return `true` for **0**, **1** and **3** so none of them will get removed/filtered out — Scaramouche, Jan 28 '20 at 06:03
I apologize! I did not double check my code. I have edited and shown anonymous fat arrow function :- / — abecodearian, Jan 28 '20 at 21:17

CertainPerformance · Accepted Answer · 2020-01-28T06:05:27.827

The problem is that you return x from the filter callback. If x (the item being iterated over) is falsey, the result won't be included in the final array, even if the b.indexOf(x) == -1 test is fulfilled.

Do the same thing you're doing with the lower code:

return b.indexOf(x) == -1

function array_diff(a, b) {
  return a.filter(function removeDuplicate(x) { return b.indexOf(x) === -1 });
}

console.log(array_diff([0,1,2,3,4],[2,4])); // [0, 1, 3]

(as a side note, you aren't using arrow functions anywhere in the code)

You could decrease the computational complexity from O(n ^ 2) to O(n) by creating a Set of b, instead of checking indexOfs on it on every iteration:

function array_diff(a, b) {
  const bSet = new Set(b);
  return a.filter(function removeDuplicate(x) { return !bSet.has(x); });
}

console.log(array_diff([0,1,2,3,4],[2,4])); // [0, 1, 3]

score 0 · Answer 2 · answered Jan 28 '20 at 06:21

you misunderstood the array.filter(callback). the callback should be a predicate,in the callback you return true for the elements you want to keep, false for the elements, not the element. As you return the elements themselves, that's why the falsey elements are removed.

also, an arrow function should be something like this

array_diff =(a,b)=>a.filter(x=>b.indexOf(x)<0)
console.log(array_diff([0,1,2,3,4],[2,4]))

array.filter() removes values in a function expression but not in arrow function

2 Answers2