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

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?

CodePudding user response：

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>

CodePudding user response：

Experimenting, it seems to be related to this no longer pointing to the correct context (which would be document) when passing document.getElementById as a callback to map, so explicitly passing a bound getElementById does the trick:

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

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

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

Unfortunately, this also kind of defeats the purpose of the approach, which would be conciseness, as this can be shortened from

arr.map(document.getElementById.bind(document))
// to
arr.map(id=>document.getElementById(id))