【JavaScript】配列のreduce関数の可読性を少し上げるテクニック

JavaScript の話題です。配列の reduce 関数、書きやすいけど可読性が低いですよね。

たとえば以下のようにコレクションを変換して id をキーとしたオブジェクトにするという操作。慣れてくれば普通に読めますけど、なんとなく読みにくいんですよね。

const users = [
  {id: 1, name: 'suzuki'},
  {id: 2, name: 'sato'},
  {id: 3, name: 'shimizu'}
]

const usersById = users.reduce(
  (obj, user) => Object.assign(obj, {[user.id]: user}),
  {}
)

問題は、reduce 関数の中にロジックを詰め込んでいることにあります。そこで、ロジックを分離してみましょう。

上記の reduce の中で行っていることは、

user をオブジェクト {[user.id]: user} にする
各オブジェクトを結合して一つのオブジェクトにまとめる

という二つの操作に分離できます。それらを分けて書くと、以下のようになります。

const usersById = users
　.map(
    (user) => ({[user.id]: user})
  ).reduce(
    (obj, userObj) => Object.assign(obj, userObj),
    {}
  )

少しは可読性が上がりました。 reduce の前に map で下処理をすると良さそうです。