JavaScriptで複数の配列から1つのオブジェクト配列を作成する方法

JavaScript開発では、複数の配列の要素を組み合わせて、1つのオブジェクト配列を生成したい場面がよくあります。この記事では、その具体的な実装方法を解説します。

問題の概要

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

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

これら2つの配列から、以下のようなオブジェクトの配列を作成して返す関数を記述する必要があります。

const response = [
    {opt: 'A', val: true},
    {opt: 'B', val: false},
    {opt: 'C', val: false},
    {opt: 'D', val: false},
];

forループを使った基本的な実装例

もっともシンプルな方法は、forループで各要素を順番に処理し、新しいオブジェクトを配列に追加していくアプローチです。以下が実際のコードです。

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

const mapArrays = (options, values) => {
    const res = [];
    for(let i = 0; i < options.length; i++){
        res.push({
            opt: options[i],
            val: values[i]
        });
    };
    return res;
};

console.log(mapArrays(options, values));

出力結果

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

[
    { opt: 'A', val: true },
    { opt: 'B', val: false },
    { opt: 'C', val: false },
    { opt: 'D', val: false }
]

map()メソッドを使った簡潔な書き方

Array.prototype.map() を利用すると、同じ処理をさらに短く、読みやすく記述できます。

const mapArrays = (options, values) =>
    options.map((opt, index) => ({ opt, val: values[index] }));

この方法では、中間変数や push() の呼び出しが不要となり、コードの意図も明確になります。

注意点

いずれの方法でも、元となる配列同士の長さが異なる場合には、短い方の長さに合わせて処理される点に留意してください。特に values[index] のようにインデックスでアクセスする場合、存在しない要素は undefined になるため、必要に応じて事前にバリデーションを行うことをおすすめします。