reduce()

May 19, 2022

개념

배열의 각 요소 마다 loop를 돌면서 callback 함수를 실행 하고 하나의 결과 값을 반환한다.

const array = [1,2,3,4,5]
const sum = array.reduce((acc, cur) => { return acc + cur }, 0)
console.log(sum) //15

callback

accumulator

콜백의 반환값을 누적

cur

처리할 현재 요소

idx (optional)

처리할 현재 요소의 인덱스
initialValue가 존재하면 0부터, 아니면 1부터 시작

self (optional)

reduce()를 호출한 배열 자신

initialValue (optional)

callback 최초 호출에서 첫 번째 인수에 제공되는 값
없으면 배열의 첫번째 요소를 사용. 즉, 인덱스 1부터 시작해 첫번째 인덱슨느 건너 뜀뜀
배열에서 초기값 없으면 오류 발생

reduce로 할 수 있는 것들

객체 배열에서의 값 합산

const sum = [{x:1}, {x:2}, {x:3}]
    .reduce((acc, cur) => { return acc + cur.x}, 0)

중첩 배열 펼치기

const flattened =  [[0,1], [2,3], [4,5]]
    .reduce((acc, cur) => acc.concat(cur), [])

객체 내의 값 인스턴스 개수 세기

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
const countedNames = names.reduce((acc, cur) => {
  if(name in acc) {
    acc[name]++
  } else {
    acc[name] = 1
  }
  return acc
}, {})

속성으로 객체 분류하기

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, cur) => {
    const key = cur[property]
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})
}
var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

배열 중복 제거

Set과 Array.from을 사용할 수 있다면 Array.from(Set(arr))을 사용하기 바란다

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const result = arr.sort().reduce((acc, cur) =>  {
  const length = acc.length
  if (length === 0 || acc[length - 1] !== cur) {
    acc.push(cur)
  }
  return acc
}, [])

함수 구성을 위한 파이프 함수

const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

const pipe = (...functions) => input => functions.reduce(acc, fn) => fn(acc), input)

const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240

참고

아래의 글을 보고 정리했습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce