JavaScriptで複数の配列を列ごとにマージしてオブジェクト配列を作成する方法

はじめに

JavaScriptでは、複数の配列の同じインデックスにある要素を組み合わせて、1つのオブジェクト配列を作成したい場面があります。本記事では、3つの数値配列を列ごと（同じインデックス同士）にマージし、オブジェクトの配列を生成する方法を解説します。

問題の概要

たとえば、次のような3つの数値配列があるとします。

const code = [123, 456, 789];
const year = [2013, 2014, 2015];
const period = [3, 4, 5];

ここで、これら3つの配列を引数として受け取り、各配列の同じ位置の要素を1つのオブジェクトにまとめた、次のようなオブジェクト配列を構築する関数を作成する必要があります。

const output = [
    {"code": 123, "year": 2013, "period": 3},
    {"code": 456, "year": 2014, "period": 4},
    {"code": 789, "year": 2015, "period": 5}
];

実装コード

この処理は、forループで各インデックスの要素を順番に取り出しながら、新しいオブジェクトを結果配列に追加していくことで実現できます。

const code = [123, 456, 789];
const year = [2013, 2014, 2015];
const period = [3, 4, 5];
const mergeColumnWise = (code = [], year = [], period = []) => {
    let results = [];
    for(let i = 0; i < code.length; i++) {
        results.push({
            code: code[i],
            year: year[i],
            period: period[i]
        });
    }
    return results;
};
console.log(mergeColumnWise(code, year, period));

出力

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

[
    { code: 123, year: 2013, period: 3 },
    { code: 456, year: 2014, period: 4 },
    { code: 789, year: 2015, period: 5 }
]

補足：map()を使ったより簡潔な書き方

forループの代わりにArray.prototype.map()メソッドを使うと、同じ処理をより簡潔に記述できます。

const mergeColumnWise = (code = [], year = [], period = []) =>
    code.map((c, i) => ({ code: c, year: year[i], period: period[i] }));

map()は元の配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を生成するため、「対応関係のある複数配列の結合」に適しています。どちらの方法でも結果は同じですが、コードの意図が明確になり可読性が向上するため、map()を使った書き方が推奨されることが多いです。

まとめ

複数の配列を同じインデックス単位でマージしてオブジェクト配列を作成するには、forループまたはmap()メソッドを利用します。なお、配列の長さが異なる場合に備えて、最も短い配列の長さに合わせてループを制御するなど、入力データの整合性への考慮を加えると、より堅牢な実装になります。