배열 reduce 메서드

처음 reduce를 보고 직관적으로 이해가 가지 않았다.
하지만 구글엔 좋은 선생님들이 많았다.
이런저런 예시를 많이 보고난 이후에야 비로소 어떤 메소드인지 파악하게 됐다.

🍫 reduce 는 무엇인가..?

• 배열에서 쓸 수 있는 메서드로 각요소에 주어진 리듀서 함수(콜백함수)를 실행하고, 결과값을 반환한다.

mdn 만 봐서는 직관적으로 이해가 가질 않았다.
이것저것 찾아보면서 내가 이해할 수 있는 쉬운 언어로 변환한 결과,
배열의 각 인덱스 값을 탐색하는 반복문 정도(..?) 로 이해가 된다.

reduce()는 다음과 같이 사용한다.

배열.reduce( (누적값, 현잿값, 인덱스 , 요소) => { return 결과 } , 초기값 )

여기서 파라미터는 크게는 빨간색으로 표시한 1. 함수와 파랑색으로 표시한 2. 초기값으로 나뉜다.

중요한 점은 첫번째 파라미터 1. 함수 가 말그대로 함수 형태여야 한다는 것이다.
두번째 2. 초기값 은 특정 숫자가 될 수도 있고, 배열이나 객체, 함수가 될 수도 있다.

여기서 1. 함수 부분을 리듀서 함수라고 부르는데,
총 4개의 파라미터를 받는다. 이걸 또 한번 나눠보면,

배열.reduce( (누적값, 현잿값 , 인덱스 , 요소) => { return 결과 }, 초기값 )

빨간색으로 표시한 누적값, 현잿값 과
초록색으로 표시한 인덱스, 요소 로 나뉜다.

누적값, 현잿값은 필수 파라미터다.

• 누적값 : 함수가 리턴한 직전의 계산값
• 현잿값 : 현재 탐색하고 있는 배열 인덱스의 "요소값"

인덱스, 요소은 옵션이다.

• 인덱스 : 현재 탐색하고 있는 배열의 "인덱스 값"
• 요소 : 작업을 수행하는 배열 그 자체

🍫 내 언어로 풀어놓은 예시..

조금 구조가 복잡해서, 예제를 보고 이해하는 것이 빨랐다.

function sum(...arr) { 
  return arr.reduce ((prev, cur) =>  {
    return prev + cur;
  }, 0);
}

sum (1, 2, 3, 4); // 10

차근차근 보자..

1. sum함수에 인자를 받아서 배열로 변환시켜준다. ex) 1, 2, 3, 4 -> [ 1, 2, 3, 4 ]

2. [1,2,3,4].reduce를 실행한다.

   첫번째 반복(탐색)시 :
   prev = 초기값으로 설정해 놓은 0
   cur = [ 1, 2, 3, 4 ] 의 0번째 인덱스 값인 1
   prev + cur = 0 + 1 = 1

   두번째 반복(탐색)시 :
   prev = 첫번째 반복으로 누적된 값 1
   cur = [ 1, 2, 3, 4 ] 의 1번째 인덱스 값인 2
   prev + cur = 1 + 2 = 3

   세번째 반복(탐색)시 :
   prev = 두번째 반복으로 누적된 값 3
   cur = [ 1, 2, 3, 4 ] 의 2번째 인덱스 값인 3
   prev + cur = 3 + 3 = 6

   네번째 반복(탐색)시 :
   prev = 세번째 반복으로 누적된 값 6
   cur = [ 1, 2, 3, 4 ] 의 2번째 인덱스 값인 4
   prev + cur = 6 + 4 = 10