hacca8

JavaScriptのreduceについて

reduce関数は、配列内の各要素を一つの値にまとめたい場合などに使用します。
合計値を出したり、文字列を繋げたり、オブジェクトに格納したりできます。

構文

/**
 * const result = array.reduce((現在の累積値, 処理中の要素, 処理中のインデックス, 対象のarray) => {
 *   return 次の値;
 * }, 初期値);
 */
const resulet = array.reduce((accumulator, currentValue, index, array) => {
  return nextValue;
}, initialValue);

indexarrayinitialValueは省略可能です。
初期値initialValueが省略された場合、配列の最初の値を初期値として扱います。
初期値が省略された場合、index1からになります。(0は初期値になるため)

よくある使用例

合計値を出す

const numList = [1, 2, 3, 4, 5];
const result = numList.reduce((acc, value) => {
  return acc + value;
});
console.log(result);
// 15

const result2 = numList.reduce((acc, value) => {
  return acc + value;
}, 2);
console.log(result2);
// 17

文字列を繋げる

const strList = ['あ', 'い', 'う', 'え' , 'お'];
const result = strList.reduce((acc, value) => {
  return acc + value;
});
console.log(result);
// あいうえお

const result2 = strList.reduce((acc, value) => {
  return acc + value;
}, 2);
console.log(result2);
// 2あいうえお

オブジェクトを加工してまとめる

const data = [
  {name: 'ichiro', year: 2001},
  {name: 'jiro', year: 2002},
  {name: 'saburo', year: 2003}
];
const result = data.reduce((acc, value) => {
  acc[value.name] = value.year;
  return acc;
}, {});
console.log(result);
// {ichiro: 2001, jiro: 2002, saburo: 2003}