概要

プログラムしていて、指定回数分の処理を繰り返したいことってありますよね。
for文やwhile文で記述すればいいじゃんという意見もあるかもしれませんが、行数が増えてしまうし、ぱっと見で繰り返し回数がわからないのが難点でした。このような理由で簡潔にループ処理する方法を探していました。

結論

個人的に最も簡潔に記述できるのは、Arrayオブジェクトをスプレッド構文で展開して配列を作成し、map(もしくは、forEach)を用いてループする方法だと思います。

[...Array(10)].map(() => console.log('10回実行されます'));

ちなみにArray(ｎ)で生成されるのは空のスロットを持つ配列であり、実際の値(undefinedや空文字を含む)が入ったスロットではない。mapやforEachは空の要素に対しては呼び出しを実行しないため、以下のケースではループ処理が実行されません。

Array(10).map(() => console.log('ループ処理が実行されません'));

const arr = new Array(10);
arr.map(() => console.log('ループ処理が実行されません'));

審議

MDN Web Docsではmapを使用すべきではないケースとして、以下のような例が挙げられている。

返された配列を使用しない場合
コールバックから値を返さない場合

返却される新しい配列を使用しない場合でも、配列操作として使い慣れているmapを使いがちだけど、forEachを用いたほうが良いのかもしれません。

その他のループ処理方法

// Array(n).fill()
// 記述が短くて良さげ
Array(10).fill().map(() => console.log('10回実行されます'));

// Array.from({ length: n })
// ぱっと見でわかりやすい
Array.from({ length: 10 }).map(() => console.log('10回実行されます'));
Array.from({ length: 10 }, () => console.log('10回実行されます'));

// Array.apply(any, Array(n))
// 古い環境でも使えるのが利点
Array.apply(undefined, Array(10)).map(() => console.log('10回実行されます'));

最後に

もちろんfor文で頑張るのも選択肢です。個人的にはやはり[...Array(n)].map(fn)を使うのがいいと思います。