JavaScriptでオブジェクトの配列を逆順にループして文字列を生成する方法

JavaScriptでは、オブジェクトが格納された配列を末尾から先頭へ向かってループ処理し、その結果をひとつの文字列として組み立てたいケースがあります。本記事では、具体的なサンプルコードを通じて、その実装方法をわかりやすく解説します。

対象となるデータ

まず、次のようなオブジェクトの配列を用意します。各オブジェクトには id、Name、RowNumber のプロパティが含まれています。

const data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];

実装したい処理の内容

この配列を受け取り、最後尾のオブジェクトから先頭に向かって各要素の Name プロパティを取り出し、それらをカンマとスペース（, ）で連結したひとつの文字列として返す関数を作成します。

期待される結果は「Ken, Jane, Isabelle, ... , Bob, Abe」のように、配列の末尾から順に名前が並ぶ文字列です。

サンプルコード

以下は、従来の for ループを使って配列を逆順に走査する実装例です。ポイントは、ループ変数を配列の最終インデックス（arr.length - 1）から開始し、インデックスが 0 以上である限りデクリメントしながら繰り返す点です。

const buildString = arr => {
    let str = '';
    // 配列の末尾から先頭へ向かってループ
    for(let i = arr.length-1; i > -1; i--){
        str += `${arr[i]["Name"]}, `;
    };
    // 末尾の余分な ", " を取り除いて返す
    return str.substring(0, str.length-2);
};
console.log(buildString(data));

コードのポイント

• ループの初期値：arr.length - 1 を指定することで、配列の最後の要素から処理を始められます。
• 継続条件：i > -1 とすることで、インデックス 0（先頭の要素）まで確実に処理されます。
• 余分な区切り文字の除去：連結時にすべての名前の後に , を付けているため、最後に substring() で末尾2文字を切り取って整えています。

なお、substring(0, str.length - 2) の代わりに str.slice(0, -2) や str.trimEnd().replace(/,$/, '') などを使っても同様の結果が得られます。

実行結果

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

Ken, Jane, Isabelle, Helen, Gabe, Frank, Edna, Don, Clair, Bob, Abe

別のアプローチ：reverse() と join() を活用する

より簡潔に書きたい場合は、map()・reverse()・join() を組み合わせる方法もおすすめです。

const buildString = arr =>
    arr.map(obj => obj.Name).reverse().join(', ');

console.log(buildString(data));
// Ken, Jane, Isabelle, Helen, Gabe, Frank, Edna, Don, Clair, Bob, Abe

この方法では、まず map() で名前だけの配列を作り、reverse() で順序を反転させ、最後に join(', ') で連結しています。元の配列を変更したくない場合は [...arr].map(...) のようにコピーを作成すると安全です。

まとめ

オブジェクトの配列を後方からループするには、for ループでインデックスを末尾から減らしていく方法が基本です。また、reverse() と join() を使えば、より宣言的で読みやすいコードを実現できます。用途や可読性の要件に応じて、両者の使い分けを検討してみてください。