Why does Array.filter(Number) filter zero out in JavaScript?

Question

I\'m trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.

Here\'s the

Answer 1

Expected behavior

This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.

var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
console.log(a); // [-1, 1, 2, 3, 4, "test"]

This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.

Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.

false
null
undefined
0
NaN
''
""
``

(For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)

Answer 2

The reason for this behavior is that 0, null, undefined, NaN is equivalent to false in JavaScript so, in the first case:

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number);

when used Number as one of the params in the filter, it returns the number itself. So when 0 is passed it returns 0 which javascript understands as false. So, it returns

[-1, 1, 2, 3, 4]

So to be on the safe side it is advised to use Number.isFinite instead of just Number.

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite);

Gives same results as

[-1,0,1,2,3,4, Number(0), '','test'].filter(n=> typeof n === 'number');

would give.

Answer 3

When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them

whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out

Answer 4

It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.

Documentation

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Answer 5

Because 0 is one of the many falsy values in javascript

All these conditions will be sent to else blocks:

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)

From the Array.prototype.filter() documentation:

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true

In your case the callback function is the Number. So your code is equivalent to:

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a)) 

// Number(0) -> 0
// Number(Number(0)) -> 0
// Number('') -> 0
// Number('test') -> NaN

When filter function picks truthy values (or values that coerces to true), the items which return 0 and NaN are ignored. So, it returns [-1, 1, 2, 3, 4]

Answer 6

Here is another example showing how to remove multiple indices from an Array of numbers, and dealing with the 0:

const array = [0,1,2,3,4,5,6,7,8,9]
console.log('init', array)

const indicesToDel = [2, 3, 5, 9]
console.log('indices to del', indicesToDel)

let result = array.filter( (item, index) => !indicesToDel.includes(index) ? Number.isFinite(item) : false )
console.log('result', result)