JavaScriptで2つの配列の対応する要素を組み合わせる方法

問題の概要

ここでは、同じ長さを持つ2つの配列を受け取るJavaScript関数を作成します。この関数は、両方の配列から対応する位置にある要素を取り出してペア(サブ配列)を作り、それらをまとめた新しい配列を返す必要があります。

たとえば、次のような2つの配列が与えられた場合を考えてみましょう。

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

このとき、期待される出力は以下のとおりです。

const output = [
    ['a', 1],
    ['b', 2],
    ['c', 3]
];

forループを使った実装例

まずは基本的なforループを使った実装方法を見ていきます。片方の配列の長さ分だけループを回し、各インデックスの要素を取り出してペアを作成し、結果用の配列に追加していきます。

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

const combineCorresponding = (arr1 = [], arr2 = []) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
        const el1 = arr1[i];
        const el2 = arr2[i];
        res.push([el1, el2]);
    };
    return res;
};

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

出力結果

上記のコードを実行すると、コンソールには次のように表示されます。

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

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

Array.prototype.map()メソッドを利用すると、同じ処理をさらに簡潔に記述できます。map()は元の配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を生成するため、第2引数のインデックスiを使って対応する要素同士をペアにできます。

const combineCorresponding = (arr1 = [], arr2 = []) =>
    arr1.map((el, i) => [el, arr2[i]]);

console.log(combineCorresponding(['a', 'b', 'c'], [1, 2, 3]));
// 出力: [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

map()を使った書き方は、コード量が少なく可読性が高く、副作用もないため、モダンなJavaScriptではこちらのアプローチが好まれる傾向にあります。状況に応じて、forループ版と使い分けるとよいでしょう。