Array.map.filter(Boolean)で繋げば、mapの返り値にundefinedを含めることもなくなる (JavaScript)

JavaScriptのmapを使ったときにundefinedがついてきてしまうときの対応法を備忘録がてら書く。

例えば下記のようなコードを書く。

const userList = [
  {id:1, name:'Test1', isAdmin: true},
  {id:2, name:'Test2', isAdmin: true},
  {id:3, name:'Test3', isAdmin: false},
  {id:4, name:'Test4', isAdmin: false}
];

const users = userList.map(user => {
    // サンプルということでシンプルに省略
    if(user.isAdmin) return { ...user };
  });
  
console.log({users});
/*
[ { id: 1, name: 'Test1', isAdmin: true },
  { id: 2, name: 'Test2', isAdmin: true },
  undefined,
  undefined ]
*/
// => user.isAdmin === falseのデータについてはundefinedになってしまう。

こういうとき、空要素除去にはfilterが使える。 下記のQiita記事がとても参考になるし、分かりやすい。

qiita.com

上の記事にあるコードを参考に空要素除去パターンのfilterを書いてみる。

const arr = [1,2,false,undefined, 5, '']
const filteredArr = arr.filter(Boolean);
console.log({filteredArr});
// => { filteredArr: [ 1, 2, 5 ] }

上でのやり方をmapでの処理にそのまま繋げれば、下記のようにいい感じにかける。

const userList = [
  {id:1, name:'Test1', isAdmin: true},
  {id:2, name:'Test2', isAdmin: true},
  {id:3, name:'Test3', isAdmin: false},
  {id:4, name:'Test4', isAdmin: false}
];

const users = userList.map(user => {
    // サンプルということでシンプルに省略
    if(user.isAdmin) return { ...user };
  }).filter(Boolean);

  
console.log({users});
/*
[ { id: 1, name: 'Test1', isAdmin: true },
  { id: 2, name: 'Test2', isAdmin: true } ]
*/

mapの後にそのままつないでfilter(Boolean) すれば良いのだということに、今更ながら気づいた年の瀬である。。。