JavaScriptで2つの配列を1つのオブジェクトのキーと値のペアとしてまとめる方法

JavaScriptでは、同じ長さの2つの配列があったとき、一方を「キー」、もう一方を「値」として扱い、それらを組み合わせて1つのオブジェクトを作りたい場面があります。

例えば、次のように同じ長さの2つの配列があるとします。

const arr1 = ['firstName', 'lastName', 'age', 'address', 'isEmployed'];
const arr2 = ['Rahul', 'Sharma', 23, 'Tilak Nagar', false];

この場合、arr1 の各要素をプロパティ名（キー）として、対応する arr2 の要素をその値に割り当てたオブジェクトを生成する関数が必要です。つまり、以下のような結果が得られることを目指します。

{
    firstName: 'Rahul',
    lastName: 'Sharma',
    age: 23,
    address: 'Tilak Nagar',
    isEmployed: false
}

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

このような変換には、Array.prototype.reduce() メソッドが便利です。reduce() を使うことで、配列を反復処理しながら、空のオブジェクトを初期値として順番にプロパティを追加していくことができます。

具体的なコードは以下の通りです。

const arr1 = ['firstName', 'lastName', 'age', 'address', 'isEmployed'];
const arr2 = ['Rahul', 'Sharma', 23, 'Tilak Nagar', false];

const mapArrays = (arr1 = [], arr2 = []) => {
    const res = arr1.reduce((acc, elem, index) => {
        acc[elem] = arr2[index];
        return acc;
    }, {});
    return res;
};

console.log(mapArrays(arr1, arr2));

コードの解説

このコードの動作を順に見ていきましょう。

1. アキュムレータ（acc）の役割

reduce() の第2引数に {}（空のオブジェクト）を渡しているため、コールバック内の acc は最初は空のオブジェクトから始まります。ループが進むごとに、このオブジェクトへプロパティが追加されていきます。

2. キーと値の割り当て

acc[elem] = arr2[index] の部分で、arr1 の現在の要素（例：'firstName'）をキーとし、同じインデックス位置にある arr2 の要素（例：'Rahul'）を値として設定しています。これにより、2つの配列の要素がインデックスを基準に正しくペアリングされます。

3. 実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

{
    firstName: 'Rahul',
    lastName: 'Sharma',
    age: 23,
    address: 'Tilak Nagar',
    isEmployed: false
}

代替手法：Object.fromEntries() を使う方法

モダンなJavaScript環境では、より簡潔に書ける方法もあります。Object.fromEntries() と map() を組み合わせると、次のように1行で同様の結果が得られます。

const mapArrays = (keys, values) =>
    Object.fromEntries(keys.map((key, index) => [key, values[index]]));

console.log(mapArrays(arr1, arr2));

こちらの方法では、map() によって [キー, 値] のペア配列を作り、それを Object.fromEntries() に渡すことで直接オブジェクトに変換しています。可読性が高く、イミュータブルなスタイルで書けるのが特徴です。

注意点

両方の配列の長さが一致していない場合、短い方の配列に合わせて処理されるため、余った要素は無視されます。実運用では、事前に arr1.length === arr2.length をチェックするなど、長さの検証を加えておくと安全です。