why Array.prototype.map.call instead of Array.map.call

Question

I fell upon some lines of code where the guy uses Array.prototype.map.call instead of Array.map.call:

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

Why not simply calling Array.map.call? I checked on the Firefox console and both Array and Array.prototype have the map function. Is there a difference ?

Answer 1

This is because document.querySelectorAll does not return an Array instance but an instance of NodeList (or at least is not guaranteed to return an Array on all browsers). NodeList has indexed elements but does not include all methods from the Array prototype.

This is why we need a hack calling map method from Array's prototype in the context of the returned object.

I assume that you understand that for:

var a = [], f = function() {};

the expression:

a.map(f);

is equivalent to:

Array.prototype.map.call(a, f);

See also:

• Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Answer 2

Because Array.map.call doesn't work. Array.map is built to accept two parameters: the array, and the callback. call runs a function setting its this to the object you supply.

So, when you run Array.prototype.map.call(somearray,function(){...}); it is virtually the same as if you called somearray.map(function(){...});. Array.map is just a utility method Javascript in Firefox only (another reason why not to use it) has to make life easier. The Array.map function is not cross-browser.

Edit: The reason that they had to use Array.prototype.map.call(links,...); instead of just links.map(...);, is that querySelectorAll does not return a normal array, it returns a NodeList that does not have a map method.