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?
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
thisnot corresponding to the type expected by the function.This issue can arise when using the
Function.prototype.call()orFunction.prototype.apply()methods, and providing athisargument 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
thistarget 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 theFunction.prototype.bind()function to force thethisargument 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>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))