JavaScriptで配列の各要素の2乗を元の配列に追加して新しい配列を作る方法

はじめに

次のような数値の配列があるとします。

const arr = [12, 19, 5, 7, 9, 11, 21, 4];

この配列を受け取り、元の配列のすべての要素に加えて、対応する各要素の2乗も末尾に追加した新しい配列を返す関数を作成する必要があります。

上記のサンプル配列の場合、期待される出力は次のとおりです。

[12, 19, 5, 7, 9, 11, 21, 4, 144, 361, 25, 49, 81, 121, 441, 16]

つまり、元の配列「[12, 19, 5, 7, 9, 11, 21, 4]」の後ろに、各要素を2乗した値「144, 361, 25, 49, 81, 121, 441, 16」が連結された形になります。

実装例

このような処理は、Array.prototype.reduce() メソッドを使うと簡潔に実装できます。ポイントは、reduce の第2引数に元の配列そのものを初期値として渡すことです。こうすることで、アキュムレータが元の配列から処理を開始し、各要素の2乗を順番に連結していきます。

const arr = [12, 19, 5, 7, 9, 11, 21, 4];
const multiplyArray = (arr) => {
    return arr.reduce((acc, val) => {
        return acc.concat(val * val);
    }, arr);
};
console.log(multiplyArray(arr));

実行結果

コンソールには次のように出力されます。

[
    12, 19, 5, 7, 9, 11,
    21, 4, 144, 361, 25, 49,
    81, 121, 441, 16
]

コードの解説

reduce メソッドは、配列の各要素に対してコールバック関数を順に実行し、結果を1つの値へと集約します。ここでは初期値として元の配列 arr を指定しているため、アキュムレータ(acc)は元の配列の状態からスタートします。

コールバック関数内では、現在処理中の要素 val を2乗(val * val)し、concat メソッドでアキュムレータの末尾に追加しています。すべての要素の処理が完了すると、元の要素とそれぞれの2乗が並んだ新しい配列が返されます。

なお、concat は元の配列を変更せずに新しい配列を生成するため、この方法でも入力配列自体は破壊されません。ただし、要素ごとに新しい配列を作るためパフォーマンス面ではやや不利です。より効率化したい場合は、push を使って事前にコピーした配列へ追記する方法や、スプレッド構文を活用する方法も検討するとよいでしょう。