Perform .join on value in array of objects

Question

If I have an array of strings, I can use the .join() method to get a single string, with each element separated by commas, like so:

["Joe", "Kevin", "Peter"].join(", ") // => "Joe, Kevin, Peter" 

I have an array of objects, and I’d like to perform a similar operation on a value held within it; so from

[   {name: "Joe", age: 22},   {name: "Kevin", age: 24},   {name: "Peter", age: 21} ] 

perform the join method only on the name attribute, to achieve the same output as before.

Currently I have the following function:

function joinObj(a, attr){   var out = [];    for (var i = 0; i < a.length; i++){     out.push(a[i][attr]);   }    return out.join(", "); } 

There’s nothing wrong with that code, it works, but all of a sudden I’ve gone from a simple, succinct line of code to a very imperative function. Is there a more succinct, ideally more functional way of writing this?

Answer 1

If you want to map objects to something (in this case a property). I think Array.prototype.map is what you're looking for if you want to code functionally.

console.log([       {name: "Joe", age: 22},       {name: "Kevin", age: 24},       {name: "Peter", age: 21}     ].map(function(elem){         return elem.name;     }).join(","));

In modern JavaScript:

console.log([       {name: "Joe", age: 22},       {name: "Kevin", age: 24},       {name: "Peter", age: 21}     ].map(e => e.name).join(","));

(fiddle)

If you want to support older browsers, that are not ES5 compliant you can shim it (there is a polyfill on the MDN page above). Another alternative would be to use underscorejs's pluck method:

var users = [       {name: "Joe", age: 22},       {name: "Kevin", age: 24},       {name: "Peter", age: 21}     ]; var result = _.pluck(users,'name').join(",")