【JavaScript】filterでFalsyな値(偽値)を配列から除去する方法

前提知識: JavaScriptにおけるFalsyな値について

falsyな値（偽値、falseyな値）とはfalseと評価される値のことを指します。
JavaScriptにおけるfalsyな値は以下の8つです。¹

なお、falsyな値の取り扱いの詳細はJavaScirptのif文の真偽値まとめ。if(value)やif(value == null)などについて具体例で理解するで紹介しています。

filterでfalsyな値を配列から除去する方法

今回は2つの方法を紹介します。

なお、JavaScriptにおける配列の空要素除去filterパターンではfilter(value => !!value)を利用する方法も紹介されていますが、個人的にあまり見かけたことがない方法のため本記事では紹介を省略します。

『filter(Boolean)』を利用する方法について

filter(Boolean)を利用することで以下のようにfalsyな値を配列から除去できます。

console.log([10, false, 0, -0, "", null, undefined, NaN].filter(Boolean));
// [ 10 ]

filter(Boolean)の具体例

const allUsers = [
  {id: 1, name: 'user_1', isActive: false},
  {id: 2, name: 'user_2', isActive: true},
  {id: 3, name: 'user_3', isActive: false},
  {id: 4, name: 'user_4', isActive: true},
  {id: null, name: 'user_5', isActive: true},
  {id: 6, name: 'user_6', isActive: false},
];

// id一覧を抽出する
const ids = allUsers.map((user) => user.id).filter(Boolean);

console.log(ids);
// [ 1, 2, 3, 4, 6 ]

『filter(value => value)』を利用する方法

filter(value => value)を利用することで以下のようにfalsyな値を配列から除去できますvalueは任意の変数名でOKです。

console.log([10, false, 0, -0, "", null, undefined, NaN].filter(value => value));
// [ 10 ]

// 任意の変数名でよいためvalueをvに書き換えても問題ない
console.log([10, false, 0, -0, "", null, undefined, NaN].filter(v => v));
// [ 10 ]

『filter(value => value)』の具体例

const allUsers = [
  {id: 1, name: 'user_1', isActive: false},
  {id: 2, name: 'user_2', isActive: true},
  {id: 3, name: 'user_3', isActive: false},
  {id: 4, name: 'user_4', isActive: true},
  {id: null, name: 'user_5', isActive: true},
  {id: 6, name: 'user_6', isActive: false},
];

// idが存在するuser一覧を抽出する
const confirmedUsers = allUsers.filter((user) => user.id);
// 以下の書き方でもOK
// const confirmedUsers = allUsers.filter(({ id }) => id);

console.log(confirmedUsers);
// [
//   { id: 1, name: 'user_1', isActive: false },
//   { id: 2, name: 'user_2', isActive: true },
//   { id: 3, name: 'user_3', isActive: false },
//   { id: 4, name: 'user_4', isActive: true },
//   { id: 6, name: 'user_6', isActive: false }
// ]

const allUsers = [
  {id: 1, name: 'user_1', isActive: false},
  {id: 2, name: 'user_2', isActive: true},
  {id: 3, name: 'user_3', isActive: false},
  {id: 4, name: 'user_4', isActive: true},
  {id: null, name: 'user_5', isActive: true},
  {id: 6, name: 'user_6', isActive: false},
];

// id一覧を抽出する
const ids = allUsers.map((user) => user.id).filter(id => id);

console.log(ids);
// [ 1, 2, 3, 4, 6 ]

const allUsers = [
  {id: 1, name: 'user_1', isActive: false},
  {id: 2, name: 'user_2', isActive: true},
  {id: 3, name: 'user_3', isActive: false},
  {id: 4, name: 'user_4', isActive: true},
  {id: null, name: 'user_5', isActive: true},
  {id: 6, name: 'user_6', isActive: false},
];

// isActiveがtrueかつidが存在するuser一覧を抽出する
const confirmedActiveUsers = allUsers.filter((user) => user.isActive && user.id);
// 以下の書き方でもOK
// const confirmedActiveUsers = allUsers.filter(({ isActive, id }) => isActive && id);

console.log(confirmedActiveUsers);
// [
//   { id: 2, name: 'user_2', isActive: true },
//   { id: 4, name: 'user_4', isActive: true }
// ]

参考: nullが原因でTypeScriptにおいて型エラーが発生する場合

TypeScriptではfilter(Boolean)やfilter(value => value)を適用する元配列にnullが存在していると型エラーになるケースがあります。
型エラーになる場合はas（型アサーション）を利用することでエラーを解消できます。

as（型アサーション）の詳細解説はTypeScriptのas(型アサーション)の概要と使いどころで紹介しています。

具体例は以下の通りです。

type UserType = {
  id: number;
  name: string;
  isActive: boolean;
};

let allUsers: UserType[] = [];

// nullが存在していると型エラーになるため、as(型アサーション)を追加
allUsers = [
  { id: 1, name: "user_1", isActive: false },
  null,
  { id: 3, name: "user_3", isActive: false },
  { id: 4, name: "user_4", isActive: true },
].filter(Boolean) as UserType[];


console.log(allUsers);
// [{
//   "id": 1,
//   "name": "user_1",
//   "isActive": false
// }, {
//   "id": 3,
//   "name": "user_3",
//   "isActive": false
// }, {
//   "id": 4,
//   "name": "user_4",
//   "isActive": true
// }]

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！