JavaScriptでオブジェクトの配列を1つのオブジェクトにフラット化する最も簡単な方法

JavaScriptでは、reduce()メソッドを活用することで、オブジェクトの配列を1つのオブジェクトへと簡単にフラット化できます。スプレッド構文（...）と組み合わせることで、わずか数行のコードで複数のオブジェクトのプロパティをまとめられます。

サンプルデータ

例として、次のようなオブジェクトの配列を用意します。各要素が個別のオブジェクトになっており、これらを1つのオブジェクトに統合するのが目標です。

const studentDetails = [
    {Name: "Chris"},
    {Age: 22}
]

実装例：reduce()で配列をフラット化する

reduce()の初期値として空のオブジェクト{}を指定し、ループ処理の中でスプレッド構文を使って既存のプロパティと現在の要素のプロパティを順次マージしていきます。

const studentDetails = [
    {Name: "Chris"},
    {Age: 22}
]

const objectStudent = studentDetails.reduce((obj, value) => {
    return { ...obj, ...value }
}, {})

console.log(objectStudent);

コードのポイント

• 第1引数（obj）：これまでに蓄積されたオブジェクト（アキュムレータ）
• 第2引数（value）：配列から取り出された現在のオブジェクト
• { ...obj, ...value }：両方のオブジェクトのプロパティを結合した新しいオブジェクトを返す
• 初期値 {}：reduce()の第2引数として渡すことで、空の状態から処理を開始できる

プログラムの実行方法

上記のコードはNode.js環境で実行できます。ファイル名を指定して次のコマンドを実行してください。ここではファイル名を「demo64.js」としています。

node demo64.js

実行結果

プログラムを実行すると、コンソールには次のように出力されます。バラバラだった2つのオブジェクトが、NameとAgeのプロパティを持つ単一のオブジェクトに統合されていることが確認できます。

PS C:\Users\Amit\JavaScript-code> node demo64.js
{ Name: 'Chris', Age: 22 }

まとめ

reduce()とスプレッド構文を組み合わせれば、オブジェクトの配列を1つのオブジェクトにフラット化する処理を簡潔に記述できます。この手法は、APIレスポンスやフォームデータなど、配列形式で受け取ったデータを扱いやすい形に変換したい場合に非常に便利です。