メモ:TypeScriptにおけるundefined除去時のfilter, flatMapの違い

概要

業務内でTypeScriptで配列からundefinedを除去する処理を書いていて、filterとflatMapを使う機会があり違いが気になったのでメモ。

filter

• 返り値:filterに渡すコールバック関数の結果がtrueである要素のみを要素とする新しい配列
• TypeScript上で(number | undefined)[]型の配列に対してundefinedを取り除くようなfilterをかけても、返り値は(number | undefined)[]のため要素がundefinedである可能性を排除できない

const array = [1, 2, 3, undefined, 5]
const filteredArray = array.filter(number => number !== undefined)//undefinedを除去するfilterをかける

console.log(filteredArray[3].toString()) //Object is possibly 'undefined'とエラーがでる

flatMap

• 返り値各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列
• map()→flat()の順で処理をした場合と同じ結果になる(少しだけ楽に書ける)

const array = [1, 2, 3, undefined, 5]
const filteredArray = array.flatMap(number => number ?? []) //undefinedを除去する処理
//const filteredArray = array.map(number => number ?? []).flat()と同じ
//array.map(): number[][]、array.map().flat(): number[]となり、mapの戻り値が元の型に依存しないためundefinedを削除できる

console.log(filteredArray[3].toString()) //filteredArrayはnumber[]なので、エラーが出ない