【JavaScript】reduceとmapの使い方とスプレッド構文

最近Twitterを開設したのですが、色々勉強になることが多くもっと早めに初めておけばよかったな…と後悔しております...

と、そんな訳でTwitterで見かけたある事象に対して考えてみました。

const state = [
  { id: 1, deleted: false},
  { id: 2, deleted: false},
  { id: 3, deleted: false}
]

const comp = 2;

こんな感じのディクショナリでidがある数値と一致した時にdeleted=trueにしたい、という事象です。

投稿者の方は、下記のような処理をしてました。

state.map(item => item.id === comp ? {...item, deleted: true} : item )

ただ、なんか他の方法ないかなーという感じの投稿だったので当方reduceで実装してみました。

state.reduce((acc,val) => {
  if(val.id === comp) val.deleted = true;
  return [...acc, val];
}, [])

「mapの方が簡潔やな...」って感じですが笑

ただ、reduceだと色々カスタマイズできるのがおすすめポイントです。

例えばidだけの連想配列にしたいとか。

state.reduce((acc, val) => [...acc, {id: val.id}], [])

とにかくreduce便利なんです…

どちらもいいところがあるのでどっちがいいとかはなく、ユースケースによって使い分けるのが良さそうですね。

そしてスプレッド構文が登場しますが、これはES6で登場したもの。

iterable（反復処理可能）なものはこれで展開することができちゃいます。

オブジェクトの展開はすることができません（オブジェクトがiterabaleではないため）が、投稿者の方の例のようにオブジェクトの上書きをすることはできます。

Reactのチュートリアルとかやったことある人はstateの処理とかでやったことあるかも..?

改めて調べてみるとどんどん新しい書き方出てきて楽しいですね..

今回のサンプルは下記です。

See the Pen
reduce_with_spread by nakajima masahiro (@nakajima333ta)
on CodePen.