JavaScriptで2つの配列の対応する各要素にカスタム関数を適用する方法

問題

ここでは、次のようなJavaScript関数を作成する必要があります。

• 第一引数：2つの引数を受け取り、値を返すコールバック関数
• 第二引数・第三引数：ほぼ同じ長さの2つの配列

この関数は、2つの入力配列から対応する要素同士をペアにしてコールバック関数へ渡し、その戻り値を要素とする新しい配列を構築して返すものとします。

実装例

以下のコードをご覧ください。

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
const add = (a, b) => a + b;
const applyFunction = (callback = () => {}, arr1 = [], arr2 = []) => {
    const res = [];
    arr1.forEach((num1, ind) => {
        const num2 = arr2[ind];
        res.push(callback(num1, num2));
    });
    return res;
};
console.log(applyFunction(add, arr1, arr2));

処理の流れ

1. applyFunctionは、コールバック関数と2つの配列を受け取ります。引数が省略された場合に備え、デフォルト値も設定されています。
2. forEachメソッドを使い、arr1の各要素を先頭から順に処理しながら、同じインデックス位置にあるarr2の要素を取得します。
3. 取得した2つの値をコールバック関数に渡し、その戻り値を結果配列resへ追加していきます。
4. すべての要素の処理が完了した時点で、新しい配列を呼び出し元に返します。

出力結果

[6, 8, 10, 12]

この例では、add関数が各ペア(1+5、2+6、3+7、4+8)に対して適用され、それぞれの合計値からなる新しい配列が出力されます。

なお、元の配列は変更されず、常に新しい配列が生成されるため、イミュータブルなデータ操作が必要な場面でも安全に利用できます。同様の処理はArray.prototype.map()と組み合わせることでも実現可能ですが、この手法なら2つの配列を並行して走査できる点が大きな利点です。