Why can I not use getElementById as a callback to Array#map?

Question

To map an array of stringified numbers to actual Numbers, I can simply pass the Number function:

let arr = ["0", "1", "-2.5"];

console.log(arr.map(Number));

Now I would like to use the same approach with document.getElementById to map a list of id strings to their corresponding DOM nodes:

let arr = ["a", "b"];

console.log(arr.map(document.getElementById));

<div id="a">a <span id="b">b</span></div>

which gives me

"TypeError: 'getElementById' called on an object that does not implement interface Document."

Can someone explain the error?

Answer 1

You can find an explanation of what is happening here:

When this error is thrown, a function (on a given object), is called with a this not corresponding to the type expected by the function.

This issue can arise when using the Function.prototype.call() or Function.prototype.apply() methods, and providing a this argument which does not have the expected type.

This issue can also happen when providing a function that is stored as a property of an object as an argument to another function. In this case, the object that stores the function won't be the this target of that function when it is called by the other function. To work-around this issue, you will either need to provide a lambda which is making the call, or use the Function.prototype.bind() function to force the this argument to the expected object.

I also add my alternative solution: there is an overload of the method map that allows you to set the context in the second parameter:

let arr = ["a", "b"];

console.log(arr.map(document.getElementById, document));

<div id="a">a <span id="b">b</span></div>