Why using `Number.prototype.valueOf` inside of a `map()` without optional arg gives an error

Question

Reading this question I tried to perform a modification to the code that creates an array filled with zeroes:

Array.apply(null, Array(10)).map(Number.prototype.valueOf,0);

Instead of this, I wanted to use fill and understand in a better way the usage of the map function in Javascript. Using the developer tools in Chrome I executed the following, getting an error:

Array.apply(null, Array(10)).fill(0).map(Number.prototype.valueOf);

Uncaught TypeError: Number.prototype.valueOf is not generic

As I understand the map function, it executes the callback on each value of the array using that value as argument. The array is correctly created using Array.apply(null, Array(10)).fill(0), so it should be executing Number.prototype.valueOf(0), why is it giving then the error?

Answer 1

So it should be executing Number.prototype.valueOf(0), why is it giving then the error?

No. The map callback is called with no (undefined) this argument if you don't pass one to map, and the array element, the index, and the array as arguments. So it actually calls

Number.prototype.valueOf.call(undefined, 0, 0, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0])

But valueOf must be invoked on numbers or Number instances, otherwise it will throw.

Answer 2

According to MDN, the map method accepts two parameters, the second one is Value to use as this when executing callback. So when you call:

Array.apply(null, Array(10)).map(Number.prototype.valueOf,0);

You actually call Number.prototype.valueOf.call(0) which always return 0. As you know, if map accept a function that is always return 0, it creates an array filled with 0.

And if you remove the second parameter as below:

Array.apply(null, Array(10)).map(Number.prototype.valueOf);

It throws:

Uncaught TypeError: Number.prototype.valueOf is not generic(...)

You may figure out what the default this is for map in your environment:

[0].map(v=>{console.log(this);}) // =>Window for chrome developer tools

So try this:

Number.prototype.valueOf.call(window)

You may get the same error info.

Answer 3

The second argument for map is used as this. In the first case, this each time is the number 0 (which is converted to an object Number(0))

Consequently, the map function is calling Number.prototype.valueOf with this being Number(0). This is effectively the same as Number(0).valueOf() , which is naturally the number 0.

(NOT Number.prototype.valueOf(0) - try calling Number.prototype.valueOf(1) and see what that gets you)

Meanwhile, if you don't pass the this argument to map(), then it is set to window. This means you're effectively calling Number.prototype.valueOf on the window. That makes no sense, and so an error is thrown. It doesn't matter that 0 is the argument, because Number.prototype.valueOf() takes no arguments. Number(0).valueOf(1) returns 0 because the argument is ignored completely.