JavaScriptで別のオブジェクト配列をもとに新しいオブジェクト配列を作成する方法

問題の概要

次のように、ユーザーの「いいね」情報や年齢を含むオブジェクトの配列があるとします。

const arr = [
  {"user":"dan","liked":"yes","age":"22"},
  {"user":"sarah","liked":"no","age":"21"},
  {"user":"john","liked":"yes","age":"23"},
];

ここで必要なのは、この配列を受け取り、各要素から「user」をキー、「liked」を値とする新しいオブジェクトを生成して、以下のような配列を組み立てるJavaScript関数です。

const output = [
  {"dan":"yes"},
  {"sarah":"no"},
  {"john":"yes"},
];

解決策：map()メソッドを使う

配列の要素を一対一で変換する場合、Array.prototype.map()メソッドが最適です。元の配列を走査しながら、各要素ごとに新しいオブジェクトを組み立てることができます。

コード例

const arr = [
  {"user":"dan","liked":"yes","age":"22"},
  {"user":"sarah","liked":"no","age":"21"},
  {"user":"john","liked":"yes","age":"23"},
];
const mapToPair = (arr = []) => {
  const result = arr.map(obj => {
    const res = {};
    res[obj['user']] = obj['liked'];
    return res;
  });
  return result;
};
console.log(mapToPair(arr));

この関数では、map()のコールバック内で空のオブジェクト res を作成し、obj['user'] の値（ユーザー名）をキーとして、obj['liked'] の値（いいねの有無）を代入しています。その結果、各ユーザーごとに「ユーザー名 : いいね状態」のペアを持つオブジェクトが生成され、それらを集めた配列が返されます。

出力結果

コンソールには以下のように表示されます。

[ { dan: 'yes' }, { sarah: 'no' }, { john: 'yes' } ]

補足：スプレッド構文を使ったより簡潔な書き方

ES2015以降の構文を活用すれば、同じ処理をもっと短く記述できます。

const mapToPair = (arr = []) =>
  arr.map(({ user, liked }) => ({ [user]: liked }));

この書き方では、分割代入（destructuring）によって必要なプロパティ（user と liked）だけを抽出し、計算されたプロパティ名 [user] を使って動的にキーを設定しています。元データの他のプロパティ（age など）は自動的に除外されるため、意図した形式の出力が簡潔なコードで得られます。