JavaScriptで動的なJSON配列の各要素を1つのオブジェクトに統合する方法

JavaScriptで開発を行っていると、「複数のプロパティを持つオブジェクトが並んだJSON配列」を、すべてのプロパティを1つのオブジェクトにまとめた形に変換したい場面によく出会います。

例えば、次のようなオブジェクトの配列があるとします。

const arr = [
    {"name1": "firstString"},
    {"name2": "secondString"},
    {"name3": "thirdString"},
    {"name4": "fourthString"},
    {"name5": "fifthString"},
    {"name6": "sixthString"},
];

実現したいこと

この配列を受け取り、配列内のすべてのプロパティを1つのオブジェクトに集約した結果を返す関数を作成します。期待する結果は以下のとおりです。

{
    name1: 'firstString',
    name2: 'secondString',
    name3: 'thirdString',
    name4: 'fourthString',
    name5: 'fifthString',
    name6: 'sixthString'
}

reduceメソッドを使った実装方法

このような処理には、配列のreduce()メソッドが最適です。reduce()は配列の各要素を順番に処理しながら、単一の値（ここではオブジェクト）へと集約していくことができます。

具体的なコードは次のとおりです。

const arr = [
    {"name1": "firstString"},
    {"name2": "secondString"},
    {"name3": "thirdString"},
    {"name4": "fourthString"},
    {"name5": "fifthString"},
    {"name6": "sixthString"},
];

const reduceArray = arr => {
    return arr.reduce((acc, val) => {
        Object.assign(acc, val);
        return acc;
    }, {});
};

コードの解説

• reduce() の第2引数に空のオブジェクト {} を指定し、これを初期値（アキュムレータ）として使用しています。
• コールバック関数内では Object.assign() を使って、各要素（オブジェクト）のプロパティをアキュムレータにコピーしていきます。
• すべての要素が処理されると、全プロパティを含んだ1つのオブジェクトが完成します。

実行結果

この関数を実行すると、コンソールには次のように出力されます。

{
    name1: 'firstString',
    name2: 'secondString',
    name3: 'thirdString',
    name4: 'fourthString',
    name5: 'fifthString',
    name6: 'sixthString'
}

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

ES2018以降で利用できるスプレッド構文を使えば、さらに簡潔に記述することも可能です。

const mergedObject = Object.assign({}, ...arr);
// または
const mergedObject2 = arr.reduce((acc, val) => ({ ...acc, ...val }), {});

どちらの方法でも同じ結果が得られます。元の配列やオブジェクトを変更したくない場合（イミュータブルな処理にしたい場合）は、スプレッド構文を使った書き方がおすすめです。