17

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 ?

2
  • 1
    On the other hand, if you can guarantee that Array.map is available by default, you can also do function getLinks() { return [link.href for (link of document.querySelectorAll('h3.r a')]; }. :)
    – Ry-
    Nov 22, 2013 at 21:21
  • It should be noted that this is taken from a CasperJS crawler example. So there's no need to worry about cross-browser compatability. May 26, 2015 at 2:27

5 Answers 5

38

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:

0
9

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.

4
  • 1
    Hi, you are wrong. The reason is document.querySelectorAll does not return Array instance. This is why we need a hack calling it from Array's prototype in context of returned object. Nov 22, 2013 at 20:53
  • 7
    @TomaszGawel: Er, the question is about the difference between Array.map.call and Array.prototype.map.call, not between Array.prototype.map.call and calling .map directly. Or at least that’s what I got out of it.
    – Ry-
    Nov 22, 2013 at 21:00
  • @TomaszGawel: No, I mean Array.map. Try it on Firefox. Read this answer.
    – Ry-
    Nov 22, 2013 at 21:06
  • Bonus SpiderMonkey screenshot: i.imgur.com/4zLukZL.png (cf. i.imgur.com/8LUOfkk.png)
    – Ry-
    Nov 22, 2013 at 21:09
3

Good Question:

Array is a constructor function to create arrays.


If you type Array in browser console you will get a function definition, something like

function Array() { [native code] }

While if you type Array.prototype in browser console you will get an empty array i.e [ ] i.e. an Array object.

Consider this excerpt

function a(){
console.log('hi');
function b(){console.log('b');}
function c(){console.log('c');}
return {b:b,c:c,d:this}
}


When you type d = new a();
Then d is an object having two properties which are functions i.e. b and c and you can call

>> d.b() //logs b
>> d.c() //logs c

But you cannot call

a.b() or a.c() // since function b and c is not property of a.

So just as function b and c are defined in function a. Similarly function map is defined in function Array.

So you cannot call Array.map() but you have to get an object of Array and call map function on it.
Array.prototype gives us an Array object
Therefore they are using Array.prototype.map.call(a,func)

Sorry for long explanation. Hope it benefits.:)

1

map is meant to be called on array instances. Thus, Array.prototype.map. Array.map doesn't exist in most browsers.

1

They've probably avoided Array.map because it doesn't exist in Chrome or IE.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy