[JS] 배열과 reduce

참고 :

Array.prototype.reduce() - JavaScript | MDN

• Array.prototype.reduce() => 이하 reduce라고 지칭.
• reduce() 메서드는 배열의 각 요소에 대해 주어진 함수(= reducer)를 실행하고, 단 하나의 결과값을 반환한다.
• 예를 들어, let res = arr.reduce(reducer, init)에서의 reduce의 동작 원리는:
  1. 어떤 배열 arr에 대해
     • init은 후술함!
  2. 모든 값을 확인하여 각 요소별로 어떤 동작(reducer)을 수행하고
  3. 이 결과를 하나의 형태로 반환(res)한다.

 

1. reduce() 메소드

• reduce(reducer 함수, 초기값);

let arr = [];

arr.reduce(function() {
  // reducer function's stuff...
}, 초기값);

 

2. Reducer 함수

• reducer 함수는 네 개의 매개변수를 필요로 한다.
• reducer 함수는 함수명이나 함수식을 자유롭게 작성하되, 기본적으로 누산기와 현재값 변수를 반드시 사용하도록 작성하여야 한다. 
  • 화살표 함수로도 가능하다! (acc, curr, idx, src) => { acc + curr } 와 같은 형식.

function(accumulator, currentValue, idx, sourceArray) {
  // stuff...
}

• accumulator(누산기)
• currentValue(현재 값)
• idx(현재 인덱스)
• sourceArray(원본 배열)

 

i). 누산기(accumulator)

• reducer 함수의 반환 값이 할당된다.
  • 누산기의 값은 배열 순회 중 유지되므로, 최종 결과는 하나의 값이 된다.
• 즉, 누산기의 역할은 콜백 함수(=reducer 함수)의 반환값을 누적하는 데에 있다.
• 누산기의 초기 값은 reduce()에 초기값을 제공한 경우에는 초기값, 그렇지 않은 경우에는 콜백의 이전 반환값이 된다.
  • 첫 실행이며 초기값을 제공하지 않은 경우에는 배열 인덱스 0의 값이 된다.

 

ii). 현재 값(currentValue)

• 배열 순회 중 처리하는 현재 값이 된다.
• 예를 들어, [1, 2, 3].reduce()를 실행한다면 총 두 번 순회하여 현재 값은 각각 2, 3이 될 것.

 

iii). 현재 인덱스(idx)

• optional한 값이다.
• 순회 중 처리하는 현재 값의 인덱스가 된다.
• .reduce에 초기값을 제공한 경우에는 0, 아니면 1부터 시작하게 된다.

 

iv). 원본 배열(sourceArray)

• reduce를 호출한 원본 배열이 된다.

 

3. 주의!

• 누산기와 현재 값의 경우, 초기값의 존재에 따라 콜백 최초 호출에 두 가지 값 중 하나가 된다.
  • initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다. initialValue를 제공하면 인덱스 0에서 시작한다.

초기값	누산기	현재값
O(reduce의 매개변수로 제공된 경우)	초기값과 같음	arr[0]
X(reduce의 매개변수로 제공되지 않은 경우)	arr[0]	arr[1]

 

4. 작동 상세

• 아래와 같은 경우,

const arr = [0, 1, 2, 3, 4]

arr.reduce((acc, curr, idx, src) => acc + curr);

• 총 순회 회수 : 4 (배열 인덱스 1 ~ 4까지)
  • 매 순회에서 src는 변하지 않음
• acc 초기값 : 초기값을 reduce에 제공하지 않았으므로, 배열 인덱스 0의 값인 0
• curr 초기값 : 초기값을 reduce에 제공하지 않았으므로, 두번째 인덱스인 1

i). 1번째 reducer 호출

• acc : 0
• curr : 1
• idx : 1
• 반환값 : acc + curr인 1이며, 다음 순회의 acc과 같음

ii). 2번째 reducer 호출

• acc : 1
• curr : 2
• idx : 2
• 반환값 : acc + curr인 3이며, 다음 순회의 acc과 같음

iii). 3번째 reducer 호출

• acc : 3
• curr : 3
• idx : 3
• 반환값 : acc + curr인 6이며, 다음 순회의 acc과 같음

iv). 4번째 reducer 호출

• acc : 6
• curr : 4
• idx : 4
• 반환값 : acc + curr인 10이며, 다음 배열 요소가 없으므로 최종 결과인 acc은 10으로 반환됨

 

코드 스니펫

const arr = [0, 1, 2, 3, 4]

let res = arr.reduce((acc, curr, idx, src) => {
  console.log('start');
  console.log('acc:' + acc);
  console.log('curr:' + curr);
  console.log('idx:' + idx);
  console.log('src:' + src);
  console.log('acc+curr:' + (acc+curr));
  console.log('end...\n');
  return acc+curr;
});

console.log("At last, res is:" + res);

/* 실행 결과
start
acc:0
curr:1
idx:1
src:0,1,2,3,4
acc+curr:1
end...

start
acc:1
curr:2
idx:2
src:0,1,2,3,4
acc+curr:3
end...

start
acc:3
curr:3
idx:3
src:0,1,2,3,4
acc+curr:6
end...

start
acc:6
curr:4
idx:4
src:0,1,2,3,4
acc+curr:10
end...

At last, res is:10

*/