[javascript] 누산기 reduce 알아보기 (알고리즘 자주출몰)

알고리즘 문제에 많은 사람들이 풀이법으로 reduce를 많이 사용하고있다.

for문이나 카운트를 위해 별도 변수를 선언하지 않아도 아웃풋을 출력해낼 수 있기때문에

코드가 훨씬 직관적인것 같다.

 

정말 강력한 기능이라고 하는 reduce를 정리하자면 다음과 같다.

 

1. 개념

reduce는 배열 요소를 순회하며 리듀서 함수를 실행하고 누적된 하나의 값을 반환한다.

즉 함수의 반환값은 누산기에 할당되고, 배열을 순회하는 과정에 해당 값이 유지되므로

하나의 값을 반환하는 것이다.

 

 

2. 인자값

리듀서 함수가 인자로 받는것은 다음과 같다.

1. 누산기
2. 현재값
3. 현재 인덱스
4. 원본배열

MDN에서 제공하는 정보는 다음과 같다.

 

arr.reduce(callback[, initialValue])

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐
  • accumulator : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
  • currentValue : 처리할 현재 요소
  • currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
  • array (Optional) : reduce()를 호출한 배열
• initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

 

 

매개변수와 관련한 설명은 아래에 적도록 하겠다.

 

 

3. 사용 방법

 reduce() 에는 누산기가 포함되어 있기 때문에 각 배열의 요소에 대해 함수를 실행하여

누적된 값을 출력할때 용이하다!

 

1번예시) MDN 예시

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// 출력 기댓값 : 10

위의 예제 로직 수행시 아웃풋은 다음과 같다.

>> 10

 

 

위의 로직에 설명을 더하자면

 

initialValue 는 최초 호출에서 첫번째 인수에 제공하는 값이 된다.

해당 initialValue 변수에는 0을 할당해 주었으므로 0부터 더하기 연산이 시작된다고 보면 된다.

previousValue의 초기값이 0이 된다는 것이다.

따라서

0부터 배열의 요소값(currentValue)을 하나하나 더해 나간다.

 

 

* initialValue 값, 즉 초기값을 제공하지 않을 경우에는 배열의 첫번째 요소를 초기값으로 사용한다.

(빈 배열에서 초기값 없이 reduce를 사용하면 오류가 발생하니 주의.)

 

 

 

 

2번 예시) initialValue에 20이라는 값을 넣을경우?

const array1 = [1, 2, 3, 4];

// 20 + 1 + 2 + 3 + 4
const initialValue = 20;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// 출력 기댓값 : 30

위의 예제 로직 수행시 아웃풋은 다음과 같다.

>> 30

 

위 로직처럼 만약 initialValue 값을 20으로 둔다면,

previousValue의 초기값은 20이 되고,

배열의 첫번째 요소부터 acc에 값을 더해 나가므로

20 + 1 + 2 + 3 + 4 로 연산이 되어 출력값은 30이 될것이다.

 

 

3번 예시) initialValue에 배열값 넣기

 

음수와 양수값을 가지는 배열이 있다고 하고

해당 배열에서 양수의 개수, 음수의 개수를 각각 구하는 로직을 짜보면 다음과 같다.

const arr = [0, 10, -5, -8, 20, -10, 30, -9, 80, 25];

const rslt = arr.reduce((acc, cur) => {
   if (cur < 0) {
      // 음수일 경우
      acc[0]++;
   }
   else if (cur > 0) {
      // 양수일 경우
      acc[1]++;
   }
   return acc
}, [0, 0]);


console.log(rslt);
// 출력 기댓값 : [4, 5]

위의 예제 로직 수행시 아웃풋은 다음과 같다.

>> [4, 5]

 

해당 로직에서는 initialValue를 [0, 0] 으로 설정했다.

initialValue[0] 에는 총 음수의 개수를,

initialValue[1] 에는 총 양수의 개수의 카운트 값을 셋팅하기 위해서이다.

 

 

 

 

 

---

참고사이트 :  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce