[JavaScript] reduce(리듀스) 함수 알아보기

✔ reduce 함수란?

reduce는 사전적으로 줄이다라는 뜻을 가지고 있다. 사전적 의미 그대로, 리듀스 함수는 배열의 요소를 순차적으로 순회하며 숫자든 배열이든 객체든 하나의 값으로 줄여 return 하는 함수다. 즉, 배열을 기반으로 하나의 값을 도출할 때 사용된다.

 

 

✔ reduce 함수의 기본 문법

arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);

reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:

- accumulator
- currentValue
- currentIndex
- array

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다.
만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.
initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

- mozilla mdn

 

MDN의 설명보다는, 아래 예시들을 살펴보며 쉽게 이해해보자. 👀

 

 

💡 reduce 활용 예 - 배열 요소의 합산

const arr = [1, 2, 3, 4, 5]
  
arr.reduce(function (acc, cur, idx) {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);

// arr cur idx
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10 5 4

 

코드와 출력 결과를 살펴보자 초기값(0)에 누적값(arr)에 배열의 요소(cur)를 더한 값을 return 하도록 하는 code다.

초기값을 0 주었으므로 첫번째 순번에는 0 + 1을 return 한다. 그리고 출력값을 보면 return 된 값은 누적값(acc)로 할당되는 걸 확인할 수 있다. 즉, 더해진 return 값은 순차적으로 누적값(acc)로 전달된다.

// 만약 초기값을 정해주지 않았다면 배열의 0번 index부터 시작한다.

 

 

💡reduce 활용 예 - 객체 배열에서의 값 합산

const arr = [{ value: 1 }, { value: 2 }, { value: 3 }];

const result = arr.reduce(function (acc, cur, idx) {
  console.log(`${idx}번째 idx`);
  console.log(acc);
  console.log(cur);
  console.log("\n");
  return acc + cur.value;
}, 0);

console.log(`result : ${result}`);

// 0번째 idx
// 0
// { value: 1 }

// 1번째 idx
// 1
// { value: 2 }

// 2번째 idx
// 3
// { value: 3 }

// result : 6

 

reduce 함수는 객체 배열에서도 사용이 가능하다. 다만 초기값(acc)을 설정하지 않으면, 초기값이 원시값이 아닌 객체이므로 정상적인 계산이 되지 않는다.

 

 

 

💡 reduce 활용 예 - map 구현

const arr = [1, 2, 3, 4, 5]
  
const result = arr.reduce(function (acc, cur) {
  acc.push(cur % 2 ? "홀수" : "짝수");
  return acc;
}, []);

console.log(result);
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

 

map함수는 기존 배열과 다른 새 배열(다른 객체)을 리턴한다. reduce도 초기값을 빈 배열로 제공해주고, push와 같은 배열 메서드를 사용하면 map처럼 새로운 배열을  반환할 수 있다.

 

 

 

💡 이 밖의 reduce 활용 예

• object 그룹핑 / 카운팅
• 배열 flatten
• filter & map
• data type의 변환
• 비동기 프로그래밍
• 무궁무진

 

 

---

 

 

• 일반 함수로 작성하여 reduce 예시를 들었지만, 화살표 함수를 사용하면 좀 더 간결한 코드를 구성할 수 있다.
• 만약 배열을 반대방향으로부터 탐색하고 싶다면. 맨 뒤 index로부터 순회하는 reduceRight를 사용하자.
• reduce만 잘 알고 있으면 다른 배열 메서드들을 구현할 수 있다. 문제를 해결하다가 다른 메서드를 잊어버렸다면 reduce로 구현해볼 수 있다. (sort, filter, every, some, find, findIndex, includes 등)
• reduce는 이와같이 활용도가 아주 높고 강력한 메서드이므로 꼭 기억해두면, 코드의 성능을 높이고 간소화 할 수 있을 것이다.

 

 

 

 

 

 

 

참고 자료

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

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

https://jo-c.tistory.com/54

https://youtu.be/8te83LNpSUE