JavaScriptのforループで配列を逆順にする方法

今回は、配列を受け取り、その要素を逆順に並べ替えた新しい配列を返す関数を作成します。reverse() メソッドなどは使わず、forループだけを使って実装する方法を解説します。

サンプル配列

まず、今回使用するサンプル配列は以下のとおりです。

const arr = [7, 2, 3, 4, 5, 7, 8, 12, -12, 43, 6];

コード例

それでは、この関数のコードを見ていきましょう。

const arr = [7, 2, 3, 4, 5, 7, 8, 12, -12, 43, 6];
const reverse = (arr) => {
    const duplicate = arr.slice();
    const reversedArray = [];
    const { length } = arr;
    for(let i = 0; i < length; i++){
        reversedArray.push(duplicate.pop());
    };
    return reversedArray;
};
console.log(reverse(arr));

コードの解説

この関数がどのように動作するのか、処理の流れを確認してみましょう。

• arr.slice(): 元の配列を変更しないよう、slice() でコピーを作成します。これにより、元の配列はそのまま保持されます。
• duplicate.pop(): コピーした配列から末尾の要素を取り除き、その値を返します。
• reversedArray.push(): 取り出した要素を新しい配列の末尾へ追加します。
• forループ: 配列の長さ（length）の回数だけ繰り返すことで、末尾から順に要素を取り出し、逆順の配列を完成させます。

つまり、「後ろから1つずつ要素を取り出して、前から順に詰めていく」というシンプルな仕組みです。

出力結果

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

[
    6, 43, -12, 12, 8,
    7, 5, 4, 3, 2,
    7
]

補足：組み込みメソッドとの違い

なお、JavaScriptには標準で Array.prototype.reverse() メソッドが用意されています。ただし、このメソッドは元の配列自体を書き換える（破壊的な操作）点に注意が必要です。元の配列を保持したい場合は、本記事のように slice() でコピーしてから処理するか、[...arr].reverse() のようにスプレッド構文でコピーを作るのが一般的です。