reduce() method (feat. Callback function)

기억할 것

reduce 메서드에서는 return이 다시 accumulator가 된다.

초기값을 지정해 줄 수 있으며, 초기값을 지정하지 않은 경우 배열의 첫번째 항목이 초기값이 된다.

---

< Code 1번 >

const array = [1, 2, 3, 4, 5];

let result = array.reduce(function(acc, cur) {
  return acc + cur
});
console.log(result); // 15 출력

reduce 메서드 뒤에 있는 function은 무슨 함수 일까?
이런 함수를 '콜백 함수'라고 한다.

콜백함수는 다른 함수의 전달인자로 사용되는 함수인데,
여기서 근본 MDN을 살펴보고 가자...

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Callback function - MDN

Code 1번에서 function(acc, cur) 함수는 reduce 메서드의 전달인자가 된다.
이름이 없는 익명 함수

reduce 메서드는 배열 내를 순회하면서 함수를 실행하게 된다.
여기서,
acc : accumulator (누산기)
cur : current (현재값)

1. acc + cur 계산 진행 (cur는 배열 내를 순회 array[i])
2. return 값 -> acc 에 할당
3. ... 배열 내 모든 요소에 대해서 실행

초기값을 지정하지 않았으므로 초기값에는 1이 할당된다.
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15

---

< Code 2번 >

const array = [1, 2, 3, 4, 5];

let result = array.reduce(function(acc, cur) {
  return acc + cur
}, 0);
console.log(result); // 15 출력

Code 2번에서 초기값은 0이 할당된다.
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
결과는 달라지지 않았다. 하지만 연산 횟수는 증가했다.

---

< Code 3번 >

const array = [1, 2, 3, 4, 5];

let result = array.reduce(function(acc, cur) {
  return acc + cur
}, 100);
console.log(result); // 115 출력

Code 3번에서 초기값은 100이 할당된다.
100 + 1 = 101
101 + 2 = 103
103 + 3 = 106
106 + 4 = 110
110 + 5 = 115

---

나열된 계산 과정들을 참조해보면 return 값이 acc에 할당되어,
다음 계산이 진행되는 모습을 확인할 수 있다.

'순회하면서 누적한다' 라는 개념이 핵심이다.

조금 더 응용하면 reduce 메서드 내부에 조건문( if )를 삽입하여 조건에 맞는 값만 연산할 수 있다.

reduce... 오늘 처음 만난 친구라 대화가 매끄럽지는 못했으나, 많이 친해졌다.