JavaScriptで同じvalue要素を持ったオブジェクトをまとめて新しいオブジェクトを作る方法

Question

statusとして同じ要素を持った下記のような配列に対して

const items = [
    {status:'all',task:'AA'},
    {status:'all',task:'BB'},
    {status:'working',task:'XX'},
    {status:'working',task:'YY'},
    {status:'complete',task:'ZZ'},
]

statusの同じ値をまとめて、taskの部分を配列にした
新しいオブジェクトを作りたいと思っています。

const newItems = [
    {status:'all',task:['AA','BB']},
    {status:'working',task:['XX','YY']},
    {status:'complete',task:['ZZ']},
]

そこでmapやfilterを使えばできるのでは？
と思い、下記のようなコードを作成しました。

let baseItems = items
const newItems = baseItems.map((e)=>{
    const newBaseItems = baseItems.filter((v)=>v.status === e.status)
    newBaseItems.map((e)=>{
        return {
            status:e.status,
            task:e.task
        }
    })        
})
console.log(newItems)

しかしoutputはすべてundefinedの配列ができてしまいました。

[undefined, undefined, undefined, undefined, undefined] 

どうすれば、同じstatus同士をまとめて新しい配列を
作り直せるのか、どなたか詳しい方ご教示いただけませんでしょうか。

Answer 1

undefinedの配列担ってしまう原因は、mapの関数内で何もreturnしてないからですね。
ただしそこを修正したとしても質問者さんのコードではうまくいきません。

例えば以下のようにすることで目的の配列が得られます。

const items = [
    {status:'all',task:'AA'},
    {status:'all',task:'BB'},
    {status:'working',task:'XX'},
    {status:'working',task:'YY'},
    {status:'complete',task:'ZZ'},
];
const newItems = [...new Set(items.map(i=>i.status))].map(s=>({
	status: s,
	task: items.filter(i=>i.status==s).map(i=>i.task)
}));
console.log(newItems);

Comments

[takochan1192]

ご回答ありがとうござます。
Set演算子というものがあるのですね。非常にお恥ずかしいのですが、コードについて質問させてください。
...new Setの前の...はこれはどういう意味でしょうか？
確かに...入れなければ、正常な動作とならなかったので、必要なのだなとはわかりましたが、
なぜku__ra__ge様が使用したのか、教えていただけますでしょうか。
また、Set演算子を使うことで、同じ要素を取り除いて新しいオブジェクトを作成できる、という理解であっておりますでしょうか？
ご教示いただけますと幸いです。

[ku__ra__ge]

「...」はスプレッド構文です。
Setオブジェクトで重複を除いたアイテムを配列に変換するためにスプレッド構文を使っています。
Setオブジェクトは配列ではないため、配列のメソッドであるmap等を使いたい場合はそれを配列に変換してやる必要があります。

スプレッド構文
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Setオブジェクト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

[takochan1192]

ありがとうございます。しっかりと勉強させていただきます。