54

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 example (tested in Chrome Console):

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
// Which output with zero filtered out:
[-1, 1, 2, 3, 4]  // 0 is filtered

If we use typeof, it doesn't filter zero, which was expected.

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

My question:

  1. What is the difference between the 'Number' and 'typeof' approaches?

  2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.

8 Answers 8

47

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]

Sign up to request clarification or add additional context in comments.

1 Comment

Notice that new Boolean(false) is truthy, as well as an empty object ({}) and an empty array ([]).
17

To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite

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

1 Comment

Note that unlike Number('1') which returns 1, a truthy value, Number.isFinite('1') returns false.
5

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)

1 Comment

Use Number.isFinite instead of Number will be more semantic in code.
4

Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.

Comments

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

Comments

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

Comments

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.

Comments

0

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)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.