[解決済み] オブジェクトの配列にある値に対して.joinを実行する。

質問

文字列の配列がある場合、その配列に対して .join() メソッドを使って、各要素をカンマで区切った1つの文字列を取得することができます。

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

オブジェクトの配列があり、その中の値に対して同様の操作を行いたい。

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

を実行します。 join メソッドのみで name 属性で、以前と同じ出力を得ることができます。

現在、私は以下のような関数を持っています。

function joinObj(a, attr){
  var out = [];

  for (var i = 0; i < a.length; i++){
    out.push(a[i][attr]);
  }

  return out.join(", ");
}

しかし、突然、シンプルで簡潔なコードから、非常に命令的な関数に変わってしまいました。もっと簡潔で、理想的にはもっと機能的な書き方はないのでしょうか？

どのように解決するのですか？

オブジェクトを何か（この場合はプロパティ）にマッピングしたい場合。と思う Array.prototype.map は、機能的にコーディングするのであれば、必要なものだと思います。

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

モダンなJavaScriptで

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

(フィドル)

でない古いブラウザに対応させたい場合。 ES5対応 をシミュレートすることができます (上記の MDN ページに polyfill があります)。他の方法としては、underscorejsの pluck というメソッドがあります。

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