ワンライナーの配列の作り方

概要

筆者は、JavaScriptでワンライナーの配列を作りたいなーと思うことがあります。
そんな時に、よくやる間違いをしてあれ？となることがあるので備忘録として残しておきます。

サンプル1

スプレッド構文を使ってArrayのempty要素に対してundefindeを埋める方法

[...Array(3)].map((_,index)=>index))
//expected [0, 1, 2]

サンプル2

Array.prototype.fillなどを(keys())使ってemptyに対してundefindeなど埋め直してあげる方法

Array(3).fill().map((_,index)=>index))
//expected [0, 1, 2]

よくやる間違い

Array(3)で作ったempty要素に対してArray.prototype.mapをするとempty要素は無視されるので各種要素に対して処理をすることができない。

Array(3).map((_,index)=>index))
//expected [empty, empty, empty]

終わりに

実は、よくある間違いで挙げた書き方をReactのコンポーネントに対して行ってしまい何も描画されない状況に陥った。

const OneLinerList: FC<Props> = () => {
  return (
    <>
      {[...Array(2)].map((_, index) => {
        return <li key={index}>リスト {index}</li>
      })}
    </>
  )
}