JavaScript：Array のメソッドを連続で使う

リストを操作して結果を得るときに、メソッドを繋げて処理する話です。
例えば以下の様に filter して map するといった事です。
分かっている方はそっと閉じてください。。

const data = [
  { id: 1, name: '佐藤', scores: { a: 10, b: 20, c: 30 } },
  { id: 2, name: '鈴木', scores: { a: 11, b: 21, c: 31 } },
  { id: 3, name: '高橋', scores: { a: 12, b: 22, c: 32 } },
  { id: 4, name: '田中', scores: { a: 13, b: 23, c: 33 } },
  { id: 5, name: '渡辺', scores: { a: 14, b: 24, c: 34 } },
];

// b のスコアが偶数の人の名前と b のスコアを得る
const ret = data
  .filter((item) => item.scores.b % 2 === 0)
  .map((item) => ({ name: item.name, b: item.scores.b }));

// ret に入る結果
// [
//   { name: '佐藤', b: 20 },
//   { name: '高橋', b: 22 },
//   { name: '渡辺', b: 24 },
// ]

filter と map メソッドを使わなかったら

この場合、以下の感じでしょうか。

const ret = [];
for (let item of data) {
  if (item.scores.b % 2 === 0) {
    ret.push({ name: item.name, b: item.scores.b });
  }
}

filter と map メソッドを別にしたら

const temp = data.filter((item) => item.scores.b % 2 === 0);
const ret = temp.map((item) => ({ name: item.name, b: item.scores.b }));

filter で得た temp を他で使うことが無ければ、分ける理由が無いですね。

連続で使ってソートもしてみる

結果の並びを、b のスコアが高い順にしてみます。

const ret = data
  .filter((item) => item.scores.b % 2 === 0)
  .map((item) => ({ name: item.name, b: item.scores.b }))
  .sort((item1, item2) => item2.b - item1.b);

// ret に入る結果
// [
//   { name: '渡辺', b: 24 },
//   { name: '高橋', b: 22 },
//   { name: '佐藤', b: 20 },
// ]

1行で書けますが、メソッド毎に改行すると読みやすいです。
慣れないうちは記述しづらいと思いますが、慣れれば楽に処理できて読みやすいと感じると思います。