Javascript map native object methods

Question

In Python, you can something like this:

>>> list(map(str.upper, ['foo','bar']))
['FOO', 'BAR']

I would like to be able to do something similar in javascript:

I've tried the following in Chrome using the native map implementation ( https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map ):

['foo','bar'].map(String.prototype.toUpperCase)

['foo','bar'].map(String.prototype.toUpperCase.call)

Why doesn't call work? Is there any elegant way to do this or must I wrap toUpperCase in a callback function? Thx

toUpperCase.call doesn't work because call is resolved against Function.prototype and so is not related to toUpperCase. It looks at this to figure out which method is being called, and the way map invokes the function, this is undefined. — Mike Samuel
– Mike Samuel, Commented Nov 12, 2010 at 18:39

Andreas Rossberg · Accepted Answer · 2012-11-10 13:41:21Z

2

Try:

['foo','bar'].map(Function.prototype.call.bind(String.prototype.toUpperCase))

or for the same effect:

['foo','bar'].map(Function.call.bind("".toUpperCase))

JavaScript's treatment of this is a bad trip.

answered Nov 10, 2012 at 13:41

Andreas Rossberg

36.5k4 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriele Petrioli · Accepted Answer · 2010-11-12 18:34:17Z

1

Modern browsers support this (although it is a recent addition)

var a = ['foo','bar'];
var b = a.map(String.toUpperCase);

alert(b[1]);

or even

var a = ['foo','bar'].map(String.toUpperCase);
alert(a[0]);

example: http://www.jsfiddle.net/xPsba/

answered Nov 12, 2010 at 18:34

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

3 Comments

Baversjo Over a year ago

That works in firefox 4 but not in chrome 7 on mac. Guess I'll have to wrap it in a function :)

Christian C. Salvadó Over a year ago

This won't work on other browser than Firefox because String.toUpperCase is a Mozilla-extension, not part of the ECMAScript Standard (note that can be wrongly confused with String.prototype.toUpperCase), they call those "static" methods "Array and String Generics" and I don't really think other implementors will include them....

Christian C. Salvadó Over a year ago

your JSFiddle snippet is using MooTools, put No Library and try on other browsers. ;)

Chetan S · Accepted Answer · 2010-11-12 18:37:50Z

1

That is because String.prototype.toUpperCase runs on this (Context) object but map function can't set the array element as context. It passes it as an argument. A workaround would be

['foo','bar'].map(function(k) { return String.prototype.toUpperCase.call(k) });

answered Nov 12, 2010 at 18:37

Chetan S

23.8k2 gold badges67 silver badges78 bronze badges

1 Comment

Gabriele Petrioli Over a year ago

even better is to skip the prototype part altogether and use it as ['foo','bar'].map(String.toUpperCase); which runs in the right context.

Denis Howe · Accepted Answer · 2013-12-16 20:58:19Z

1

You're all missing the point. :-)

We want to call a method (not a function) on all elements of an array. You can use map:

a.map(function(x){x.frob()})

but that's too much typing. We want to say:

a.mapm(A.frob)

where A is the class of the elements of a and mapm is a new Array method that calls its argument method on each element of this (array a in this case). You could define mapm thus:

Array.prototype.mapm = function (method)
{
    return this.map(function (x) { return method.apply(x) } )
};

and call it thus:

["a", "b", "c"].mapm("".toUpperCase)    ==>     ["A", "B", "C"]

The only problem is that you've added a new element, mapm to every array, though it's ignored by most Array methods, e.g. length and map.

edited Dec 16, 2013 at 20:58

answered Dec 15, 2013 at 1:05

Denis Howe

2,5071 gold badge27 silver badges29 bronze badges

1 Comment

Fabio Beltramini Over a year ago

+1 for understanding the point. Of course, in cases where your code will need to play nicely with other code, modifying Array's prototype is risky, so maybe a slight rework to allow something like:a.map(method("toUpperCase")); function method(m){return function(x){return x[m]();}} Plus, a minor enhancement could also allow you to pass some parameters for the method via method

yckart · Accepted Answer · 2013-06-19 02:27:27Z

-1

You can use something like this:

function map(arr, fn){
    var i = 0, len = arr.length, ret = [];
    while(i < len){
        ret[i] = fn(arr[i++]);
    }
    return ret;
}

And to use it:

var result = map(['foo', 'bar'], function(item) {
    return item.toUpperCase();
});

console.log ( result ); // => ['FOO', 'BAR']

edited Jun 19, 2013 at 2:27

yckart

33.6k11 gold badges126 silver badges133 bronze badges

answered Nov 12, 2010 at 18:30

Mic

25.2k9 gold badges62 silver badges71 bronze badges

6 Comments

Baversjo Over a year ago

Do you have any example usage? I would rather use the native map function though.

Mic Over a year ago

It is not broadly available yet

Chetan S Over a year ago

a for loop would be a lot more simpler :p

Mic Over a year ago

Not sure for is any simpler, but clearly more conventional ;)

Mic Over a year ago

@DenisHowe, at the time of the answer there were no native map functions in most browsers

|

Collectives™ on Stack Overflow

Javascript map native object methods

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related