JS Reduce 메소드

 

 

 

Rest에 관한 내용을 공부하면서 오늘은  Rest에 관한 내용정리를 해야겠다고 생각을 하던 와중, 

아래와 같은 예문을 만나게 되었다. 

 

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 질문: 어떤 값을 리턴하나요?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?

 

도대체 이게 뭐람...

reduce메소드 이후로 계산이 도대체 어떻게 진행되는 것인지 도통 이해가 되질 않는다.

 

사실 공부할게 산더미라 그냥 대충 이해하고 넘어갈까... 하다가 그냥 오늘 공부하기로한 Rest개념은 잠시 접어두고

 

reduce 메소드에 대해 한번 파보려고 한다. 

 

 

학습 난이도가 갑자기 너무 올라가는데..?

 

 

 

Array.prototype.reduce()

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

- MDN

 

일단 MDN에서 어떤 말을 하는고... 보니.. 각 배열의 요소에다가 사용자가 제공한 reducer 콜백 함수를 실행하는데 이때 이전 요소의 계산값을 리턴값으로 패싱한다... 말인지 방구인지...

 

 

우선 reduce 메소드의 기본 형태를 살펴보면 이해가 빨라진다. 

 

 Array.reduce((Accumulator, CurrentValue, CurrentIndex, Array) => { Callback Function},초기값);

 

Accumulator

리턴한 값을 저장하는 변수. 초기값을 지정한 경우 초기값부터 시작한다. "passing in the return value from the calculation on the preceding element" 이 부분이 accumulator를 의미하는 부분인듯 하다. 

 

CurrentValue

현재 요소를 말한다.

 

CurrentIndex

현재 인덱스(순서)를 의미한다. 

 

Array

말 그대로 array 원본 배열을 의미한다. 

 

초기값

초기값을 설정하면 초기값부터 시작해서 배열의 요소를 차례대로 불러와 콜백 함수를 실행시킨다. 

 

 

따라서 위의 예제를 아래처럼 변형을 하면 어떤값이 나오게 될까?

 

function sum(...theArgs) {
    return theArgs.reduce((previous, current, index) => {
        console.log(previous, current, index);
        return previous + current + index;
    });
  }
  
  sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?

 

답은 1+2+3+4+(1+2+3)인덱스 가 된다.