「for + if」を「filter」で置き換えてネストを減らす

コードを書いていると、複数のデータを処理する際にfor文を使いがちになり、ネストが増える傾向にあるので、filterを利用する方法を忘れないように記しておきたいと思います。

以下のようなデータから名前の配列を生成するプログラムを考えます。
その際に、男性の場合は頭にMr.を、女性の場合はMs.をつけたいとします。

const data_list = [
  { name: "aaa", sex: "man", age: 20 },
  { name: "bbb", sex: "woman", age: 30 },
  { name: "ccc", sex: "woman", age: 10 },
  { name: "ddd", sex: "woman", age: 22 },
  { name: "eee", sex: "man", age: 24 },
  ....
];

for + ifでかくとこのようなコードが考えられます。
mainの中がわりと込み入ってしまい、可読性は良いとは言えません。

const data_list = [
  { name: "aaa", sex: "man", age: 20 },
  { name: "bbb", sex: "woman", age: 30 },
  { name: "ccc", sex: "woman", age: 10 },
  { name: "ddd", sex: "woman", age: 22 },
  { name: "eee", sex: "man", age: 24 },
];

const main = () => {
  const results = [];
  for (const data of data_list) {
    let result;
    if (data.sex === "man") {
      result = addMr(data);
    } else if (data.sex === "woman") {
      result = addMs(data);
    }
    results.push(result);
  }
  console.log(results)
}

const addMr = (data) => {
  return "Mr." + data.name;
}

const addMs = (data) => {
  return "Ms." + data.name;
}

main()

そこでfor + ifをfilterとmapで置き換えてみます。

const main = () => {
  const men_result = data_list.filter(x => {
    return x.sex === "man";
  }).map(addMr);

  const women_result = data_list.filter(x => {
    return x.sex === "woman";
  }).map(addMs);

  const results = men_result.concat(women_result);

  console.log(results)
}

const addMr = (data) => {
  return "Mr." + data.name;
}

const addMs = (data) => {
  return "Ms." + data.name;
}

main()

filterで置き換えることでネストが減り、可読性も向上しました。
(順序を考慮する場合にはこの方法ではだめですが)

処理の流れも
男性のリストを作成し、名前の配列を生成 ->女性のリストを作成し、名前の配列を生成 -> 両結果を結合
というふうに処理の全体像もわかりやすくなりました。