reduce()について

reduce()とは

typescriptでreduceというものに初めて出会った。
そもそも純粋なjavascriptですら齧った程度だったのでtypescriptには大分へし折られた。
map()やfilter()などであれば何となく知ってはいたが、reduceは知らなかったので備忘録として残す。
聞くところによると初見殺しらしい。

  interface Example {
    id: number;
    name: string;
    beer: string;
  }

const data: Example[] = [
  { id: 1, name: 'aaa', beer: 'heineken' },
  { id: 2, name: 'bbb', beer: 'badwiser' },
  { id: 3, name: 'ccc', beer: 'kirin' },
  { id: 4, name: 'ddd', beer: 'sapporo' },
  { id: 5, name: 'eee', beer: 'corona' },
];

例えばこういったinterfaceと配列が定義されているとする。

const total = data.reduce((acc: number, val) => {
  return acc + val.id;
}, 0);

reduceでこんな感じにできる。
accはアキュムレーターと呼ぶらしい。返却する型を設定する。
最後の引数は初期値。
idを全員分足して返却した。
totalは15となる。

const beers = ['heineken', 'sapporo', 'kirin', 'asahi', 'corona', 'ebisu'];

またこういった配列がやってきたとして、

interface Beer {
  name: string;
  beer: string;
}

こういったinterfaceを作成し、

const beer = beers.reduce((acc: Beer[], val) => {
  const result = data.find((item) => item.beer === val);
  if (result) {
    acc.push({ name: result.name, beer: result.beer });
  }
  return acc;
}, []);

アキュムレーターことaccをBeer[]に設定し、reduceの中でfindを使い、一致するものをBeer[]の方にして返却することができる。
beerの中は下記のようになる。

[
  {
      "name": "aaa",
      "beer": "heineken"
  },
  {
      "name": "ddd",
      "beer": "sapporo"
  },
  {
      "name": "ccc",
      "beer": "kirin"
  },
  {
      "name": "eee",
      "beer": "corona"
  }
]

ちなみに、

interface MadeIn {
  madein: {
    country: string;
    taste: string;
  };
}

こういった型で、

const data_2: MadeIn[] = [
  {
    madein: {
      country: 'germany',
      taste: 'good',
    },
  },
  {
    madein: {
      country: 'usa',
      taste: 'good',
    },
  },
  {
    madein: {
      country: 'japan',
      taste: 'good',
    },
  },
  {
    madein: {
      country: 'japan',
      taste: 'good',
    },
  },
  {
    madein: {
      country: 'mexico',
      taste: 'good',
    },
  },
];

配列でなくオブジェクトだった場合、

interface Country {
  country: string;
}

const country = Object.values(data_2).reduce((acc: Country[], m) => {
  if (m.madein.country === 'japan') {
    acc.push({ country: m.madein.country });
  }
  return acc;
}, []);


[
  {
      "country": "japan"
  },
  {
      "country": "japan"
  }
]

Object.values またはObject.keysなどで繋げてやれば使用することができる。
超初歩的かもしれないが初めて知った時驚愕した。

確かに初見殺しであり半殺しくらいにはされたが仕組みが理解できればとても便利だ。
ビールはサッポロ派だ。