function reduce

redcuce

1. 동사 (규모·크기·양 등을) 줄이다[축소하다], (가격 등을) 낮추다[할인/인하하다]
2. 동사 (음식 등을 끓일 때 국물을) 줄이다[졸이다], (국물이) 줄어들다[졸다]
3. 동사 美 비격식 체중을 줄이다, 살을 빼다

줄인다..? 이 표현이 맞는건가

MDN Web Docs

reduce함수는 배열의 요소들에 reducer함수를 실행하고 하나의 결과값을 반환합니다.

말하는 거 보니까 줄이는 건 맞는듯.
reduce함수가 가지는 인자부터 보자.

매개변수

callback

1. 누산기
2. 현재 값
3. 2번의 현재 인덱스 (옵션)
4. 원본 배열 (옵션)

기본 구조

[0, 1, 2, 3, 4].reduce(function (누산기, 현재값, 현재인덱스, 원본배열) {});

이렇다는건데 이렇게 보면 뭔소린지 도통 이해가 안간단 말이지?
일단 이 구조에서 이해 가능 한 건

• reduce함수는 callback을 사용한다.

필수로 필요한 인자 두가지.
1. 누산기
2. 현재 값
설명에 의하면

• 누산기에는 callback의 반환값을 누적한다.
• 현재 값에는 현재 배열의 처리할 요소
• reduce함수의 최종반환 값은 누적계산의 결과 값이다.

소스코드

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
});
console.log(결과값);
/*0 1
  undefined 2
  undefined 3
  undefined 4
  undefined*/

이 log에서 알아볼 수 있는 것
1. 누산기의 최초 값은 배열의 첫번째 요소 0이다.
2. 현재값의 최초 값은 배열의 두번째 요소 1이다.
3. 누산기의 이후 값은 undefined이다.

누산기 값이 왜 undefined인 거지?

💡 설명을 보면 '누산기에는 callback의 반환값을 누적한다.' 라고 되어있다. 근데 위 소스코드에는 반환한 값이 없으니 undefind라고 나올 수 밖에 없다는 추측을 해볼 수 있다.

검증

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
  	return 누산기;
});
console.log(결과값);
/*0 1
  0 2
  0 3
  0 4
  0*/

역시 반환값을 정해주니 누산기에서 계속 0을 출력한다.
그럼 반환값을 현재값으로 주면?

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
  	return 현재값;
});
console.log(결과값);
/*0 1
  1 2
  2 3
  3 4
  4*/

역시 반환값을 현재 값을 줘도 누산기에 반영이 되는 모습니다.
그 사이에 현재값은 배열 요소를 순차적으로 돌리는 걸 볼 수 있음. 그럼 누산기에 현재값을 더해보면?

결론

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
  	return 누산기 + 현재값;
});
console.log(결과값);
/*0 1
  1 2
  3 3
  6 4
  10*/

ㅋㅋ더해지네.
암튼 이 여기까지보면 대충 어느정도 이 함수의 구조를 알 수 있다.

• 누산기 : 반환 된 값
• 현재값 : 배열요소들
• 이 함수의 최종 반환 값은 누산기의 최종 값과 같다.

initialValue (옵션)

MDN Web Docs

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.

그러니까 이게 있으면 callback 첫번째 누산기 값에 해당 된다는건데...

소스코드

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
}, 100);
console.log(결과값);
/*100 0
  undefined 1
  undefined 2
  undefined 3
  undefined 4
  undefined*/

보면 알 수 있듯이 log 첫번째 누산기 값에 100이 들어간 것을 알 수 있음.
그러면서 배열의 첫번째 요소도 현재 값에 들어가게 된다.

물론 이런것도 가능

const 결과값 = [0, 1, 2, 3, 4].reduce(function (누산기, 현재값) {
	console.log(누산기, 현재값);
  	return 누산기 + 현재값;
}, 100);
console.log(결과값);
/*100 0
  100 1
  101 2
  103 3
  106 4
  110*/