【JavaScript入門】配列をキーと値のペアのオブジェクトに変換する方法

JavaScriptでは、オブジェクトの配列をキーと値のペアを持つ1つのオブジェクトへ変換したい場面がよくあります。本記事では、次のような「名前（name）」と「スコア（score）」を含む配列を例に、具体的な変換方法を解説します。

const arr = [
  { name: "Rahul", score: 89 },
  { name: "Vivek", score: 88 },
  { name: "Rakesh", score: 75 },
  { name: "Sourav", score: 82 },
  { name: "Gautam", score: 91 },
  { name: "Sunil", score: 79 },
];

目標は、この配列を受け取り、name の値をキー、score の値を対応する値として持つオブジェクトを生成するJavaScript関数を作成することです。

方法1：forループを使った実装

最も直感的な方法は、forループで配列を走査し、分割代入（Destructuring）で取り出した各要素のプロパティを、新しい空のオブジェクトに順番に代入していくアプローチです。

コード例

const buildObject = arr => {
  const obj = {};
  for (let i = 0; i < arr.length; i++) {
    const { name, score } = arr[i];
    obj[name] = score;
  }
  return obj;
};
console.log(buildObject(arr));

実行結果

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

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

各要素から name と score を取り出し、obj[name] = score; によってキーと値のペアを追加していくだけなので、処理の流れが非常に分かりやすいのが特徴です。

方法2：Array.prototype.reduce() を使った実装

より関数型プログラミングらしい書き方として、Array.prototype.reduce() メソッドを利用する方法もあります。初期値として空のオブジェクト {} を渡し、各要素ごとに累積オブジェクトへキーと値を追加していきます。

コード例

const buildObject = arr =>
  arr.reduce((acc, { name, score }) => {
    acc[name] = score;
    return acc;
  }, {});

console.log(buildObject(arr));
// 出力: { Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

reduce() を使えば、ループ処理を1つの式の中に収めることができ、コードがより簡潔になります。また、元の配列 arr を変更しないため、イミュータブルな処理スタイルにも適しています。

補足：Object.fromEntries() と map() を組み合わせる方法

ES2019以降の環境であれば、Object.fromEntries() を使うさらにモダンな書き方も可能です。

const buildObject = arr =>
  Object.fromEntries(arr.map(({ name, score }) => [name, score]));

console.log(buildObject(arr));
// 出力: { Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

map() で各要素を [キー, 値] の形式の配列に変換し、それを Object.fromEntries() に渡すことで、一気にオブジェクト化できます。

まとめ

オブジェクトの配列をキーと値のペアのオブジェクトに変換する主な方法は以下の3つです。

• forループ： 処理の流れが明快で、初心者にも理解しやすい。
• reduce()： 関数型的で簡潔、元の配列を壊さない安全な書き方。
• Object.fromEntries() + map()： 最もモダンで宣言的な記述が可能。

用途やチームのコーディング規約に合わせて、最適な方法を選択してください。