（JavaScript）mapでcontinueできないので代替案を探す

はじめに

普段JSやTSで新しい配列要素を作成したい時にmapをよく利用します。
for~ofで回しながら先に用意している配列にpushしていく書き方よりも、配列を加工したい旨を明示でき、すっきり表現できると考えています。

何がしたいのか

全ての配列に対して加工する場合は問題ないですが、一部の値のみを対象に加工した配列を返却したい場面でmapは少し面倒な動作をします。

＜仕様＞

• 管理者のユーザー名を「さん」をつけて収集したい
  

例）for~ofを利用した例

const users = [
    { name: 'sample1', age: 30, admin: true },
    { name: 'sample2', age: 20, admin: false},
];

let target = [];

for (const user of users) {
    if (!user.admin) continue;
    
    target.push(user.name + 'さん');
}

例）mapを利用した例

const users = [
    { name: 'sample1', age: 30, admin: true },
    { name: 'sample2', age: 20, admin: false},
];

const target = users.map(user => {
   // ここでcontinueしてスキップしたい、、、

    if (user.admin) {
        return user.name + 'さん';
    }
})

→ ['sample1さん', undefined]

※mapについては下記リンクを参照 developer.mozilla.org

仕様を実現しようとすると、管理者でないデータがundefinedで返却されてしまいます。
その為、map内でcontinueを利用したいとなるのですが、ご存知の通りmap内でcontinueを利用する事はできません。そこで少し工夫をして同様の動作をできるようにしてみたいと思います。

解決方法

filter関数を利用する事でundefinedが返却される問題に対応する事が可能になります。

const target = users
    .filter(user => user.admin)
    .map(user => user.name + 'さん');
→ ['sample1さん']

上記コードではfilterで管理者ユーザーのみ収集し、その後mapに収集したデータが渡されるので問題となっていたsample2ユーザーの判定時にundefinedが返却されるを解消できます。