Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

コードを書いていると、複数のデータを処理する際に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で置き換えることでネストが減り、可読性も向上しました。
(順序を考慮する場合にはこの方法ではだめですが)

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

Appseed246
programmer in tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away