たるだめ

のんびりとなんか書きます

【JavaScript】mapの結果からnull、undefinedを省く

配列の空要素を除去したい (あまりよろしくない Ver)

以下のようなコードがあるとします。

const hoges = [
  {
    hoge: "hoge1",
  },
  {
    hoge: "hoge2",
  },
  { hoge: "" },
  {},
]

const hogeValues = hoges.map(e => {
  if (e.hoge) {
    return `hoge_${e.hoge}`
  }
})

console.log(JSON.stringify(hogeValues))

このコードの出力は、

["hoge_hoge1","hoge_hoge2",null,null]

となります。

後続の処理で map から返された新しい配列を使う場合、null や undefined が含まれているとエラーとなってしまう場合もあるかと思いますが、ここで if 文を使って判定するのは、ナンセンスかなと思います。

hogeValues.forEach(hogeValue => {
  if (hogeValues) {
    // 何らかの処理
  }
})

分岐が増えますし、null や undefined を処理対象外としたい場合、後続の処理に入ってくることが無駄に感じます。

Array.prototype.filter()を使う

filter を使って排除しておけば、後続の処理でも扱いやすくなります。

const hogeValues = hoges
  .map(e => {
    if (e.hoge) {
      return `hoge_${e.hoge}`
    }
  })
  .filter(e => e)

別パターン

この程度のことは、他記事もあるので、何番煎じだろうと思うこともしばしばあります。

下記記事に filter を使った別パターンでの空要素除去方法が載っています。

上記記事内では Boolean でのやり方が紹介されています。

array.filter(Boolean)

この方法は、誰が見てもわかる書き方なのかなぁ 🤔 と思ったり。

チーム開発においては、パフォーマンスに圧倒的な差がない限りは、一番わかりやすい書き方がいいのかなと思います。