[JAVASCRIPT] .reduce 사용법

reduce, reduceRight

reduce를 덧셈 함수로 알고 계신 분들이 많은데, 대부분의 사이트에서 reduce 사용 예시를 덧셈으로 들고 있기 때문입니다. 심지어 저도 강좌에서 덧셈으로 예를 들었습니다... 하지만 reduce는 알고보면 매우 강력한 친구입니다. 함께 알아봅시다.

reduce 메서드는 다음과 같이 사용합니다. 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

이전값이 아니라 누적값이라는 것에 주의하셔야 합니다. 누적값이기 때문에 다양하게 활용할 수 있습니다. 먼저 흔한 덧셈 예시를 살펴봅시다.

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

 

acc(누적값)이 초깃값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있습니다. 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
});
// 1 2 1
// 3 3 2
result; // 6 

초깃값을 적었을 때와 안 적었을 때의 차이점이 보시이죠?

reduceRight는 reduce와 동작은 같지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 차이입니다.  

result = oneTwoThree.reduceRight((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 3 2
// 3 2 1
// 5 1 0
result; // 6

여기까지는 흔한 덧셈 예제이지만... reduce는 덧셈 곱셈만을 위한 것이 아닙니다. 초깃값을 활용하여 어떤 일을 할 수 있는지 알아보겠습니다. map과 filter과 같은 함수형 메서드를 모두 reduce로 모두 구현할 수 있습니다.

위의 map 예제를 reduce로 만들어보겠습니다.

result = oneTwoThree.reduce((acc, cur) => {
  acc.push(cur % 2 ? '홀수' : '짝수');
  return acc;
}, []);
result; // ['홀수', '짝수', '홀수']

초깃값을 배열로 만들고, 배열에 값들을 push하면 map과 같아집니다. 이를 응용하여 조건부로 push를 하면 filter와 같아집니다. 다음은 홀수만 필터링하는 코드입니다.

 

result = oneTwoThree.reduce((acc, cur) => {
  if (cur % 2) acc.push(cur);
  return acc;
}, []);
result; // [1, 3]

이와 같이 sort, every, some, find, findIndex, includes도 다 reduce로 구현 가능합니다. reduce가 이들 모두의 아버지였던 것입니다. ㅠㅠ

reduce는 비동기 프로그래밍을 할 때에도 유용합니다.

const promiseFactory = (time) => {
  return new Promise((resolve, reject) => {
    console.log(time); 
    setTimeout(resolve, time);
  });
};
[1000, 2000, 3000, 4000].reduce((acc, cur) => {
  return acc.then(() => promiseFactory(cur));
}, Promise.resolve());
// 바로 1000
// 1초 후 2000
// 2초 후 3000
// 3초 후 4000

초깃값을 Promise.resolve()로 한 후에, return된 프로미스에 then을 붙여 다음 누적값으로 넘기면 됩니다. 프로미스가 순차적으로 실행됨을 보장할 수 있습니다.

반복되는 모든 것에는 reduce를 쓸 수 있다는 것을 기억하시면 됩니다.

map과 reduce 외에도, 배열의 메서드인 sort, filter, every, some, find, findIndex, includes 정도는 알아두시면 좋습니다. 오늘 reduce만 있어도 다른 메서드들을 다 구현할 수 있다는 것을 배웠기 때문에, 다른 메서드를 까먹으면 reduce로 구현하시면 됩니다!

 

출처 : https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d