(27) Modern JavaScript - 배열 메소드 : reduce

reduce 메소드

reduce 메소드의 콜백 함수는 기본적으로 다음과 같다.

// reduce
const numbers = [1,2,3,4]

numbers.reduce((acc, el, i, arr)=> {
  return nextAccvalue
}, initialAccValue)

첫 번째를 제외한 세 파라미터는 이 전에 배운 메소드들의 콜백 함수와 역할이 똑같다.

두 번째 파라미터는 배열의 요소 전달,

세 번째 파라미터는 요소의 인덱스 전달,

네 번째 파라미터는 메소드를 호출한 배열을 전달 한다.

 

reduce 메소드에서의 첫 번쨰 파라미터는 Accumulator / 누산기라고 표현하며

줄여서 acc라고 작성한다.

reduce의 첫 번째 파라미터는 매번 콜백 함수가 반복해서 동작할 때

직전에 동작한 콜백 함수가 리턴한 값을 전달 받는 파라미터 이다.

 

그래서 reduce 메소드에 활용되는 콜백 함수는 

그 다음 콜백 함수에 acc로 전달할 값을 리턴해주게 되는데

매 반복 때마다 콜백 함수의 리턴값을 다음 콜백 함수의 acc로 전달해 주면서

결국에는 마지막에 실행되는 콜백 함수의 리턴 값이 

reduce 메소드의 최종 리턴값이 된다.

 

설명대로라면 제일 처음 실행되는 콜백 함수는 accumulator에 전달받을 값이 없을 것이다.

그래서 첫 번째 콜백 함수가 동작할 때 accumulator의 값을

reduce 메소드의 두 번째 아규먼트로 전달해주는 것이다.

 

복잡하지만 여기까지가 reduce 메소드의 기본적인 문법이다.

한번 직접 코드를 실행해보자

---

reduce 메소드의 동작 원리를 가장 간단하게 확인하는 방법은

각 배열의 값들을 합산해 보는 것이다.

// reduce
const numbers = [1,2,3,4]

const sumAll = numbers.reduce((acc, el, i)=>{
  console.log(`${i}번 index 요소로 콜백함수가 동작중`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('--------------');

  return acc + el;
}, 0)

console.log('sumAll:', sumAll);

콜백 함수의 내부를 좀 더 살펴보면

index와 함께 앞에 있는 두 파라미터(acc, el)도 출력하면서

각 반복 동작을 구분하기 위해 구분선을 출력하고

마지막으로 acc와 el을 합한 결과를 리턴하고있으며

초기값을 0으로 작성하였다.

실행결과, 메소드를 호출할 때 초기값을 0으로 작성했기 때문에

처음 0번 index의 요소로 콜백함수가 작동할 때는

accumulator 값이 0이고 요소의 값은 1이된다.

그리고 나서 콜백 함수가 두 값에 합(acc+ el)을 리턴하기 때문에

0+1이 다음 콜백 함수에 accumulator로 전달되는 것이다.

 

이 과정이 계속 반복되면서 1+2가 다음 acc로 전달되고

그 다음은 3과 더해져서 결국 마지막 콜백 함수가 실행될 때는

6+4가 리턴되면서 10이라는 값이 sumAll 변수에 할당된다.

---

참고로 reduce 메소드의 두 번째 아규먼트는(초기값 0 작성해놓은곳)은 선택사항이다.

이 값을 작성해주면 가장 처음에 동작하는 콜백함수의 acc로 전달이 되지만

생략하더라도 아래와 같이 에러가 발생하지 않으며

// reduce
const numbers = [1,2,3,4]

const sumAll = numbers.reduce((acc, el, i)=>{
  console.log(`${i}번 index 요소로 콜백함수가 동작중`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('--------------');

  return acc + el;
}, ) // 두 번쨰 아규먼트 초기값을 생략가능

console.log('sumAll:', sumAll);

배열의 0번 인덱스에 있는 요소 값이

첫 번째 실행되는 콜백 함수의 acc로 전달돼서 결과값도 동일하게 실행되긴 하지만..

 

처음에 실행되는 콜백 함수를 보면

0번 인덱스가 아닌 1번 인덱스로 시작된 모습을 확인할 수 있는데

배열의 요소는 총 4개 인데 콜백 함수는 총 3번만 동작한 것으로 볼 수 있다.

위 코드 같은 경우에는 단순히 두 파라미터의 합을 리턴하기 때문에

최종적인 리턴값은 똑같이 나왔지만

콜백 함수 내부에서 더 복잡한 계산방식이나 동작이 있다면

두 번째 아규먼트 값의 유무에 따라 다른 결과가 나올 수 있다.

 

그렇기 때문에 reduce 메소드를 사용할 때는

가급적 초기값을 명시해주는 것이 안전한 코드이다.

 

정리하자면 reduce의 구조는 현재 동작하는 콜백 함수의 리턴값이 

다음에 실행될 콜백 함수의 파라미터로 전달되며 

어떻게 사용하느냐에 따라 다양한 방식으로 활용될 수 있다.

---

▶ Notion

https://purrfect-gargoyle-935.notion.site/reduce-15ae9530b3e1801b82a9eff8018a67da?pvs=4

reduce 메소드 문 | Notion