[JS] Reduce 사용하기

[OgDoYun]

Reduce

구문

arr.reduce(callback[, initialValue])

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

• accumulator
  • 누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 호출이면서 initialValue를 제공한 경우 initialValue를 사용.
• current value
  • 처리할 현재 요소
• (optional)current index
  • 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1부터 시작한다.
• (optional)array
  • reduce( )를 호출한 배열
• (optional)initialValue
  • callback 의 최초 호출에서 첫 번재 인수에 제공하는 값.
  • 초기값을 제공하지않으면 배열의 첫 번째 요소를 사용한다.
  • 빈 배열에 초기값 없이 reduce( )를 호출하면 타입에러가 발생한다.

작동 방식

초기값을 제공하지 않는 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

callback	accumulator	currentValue	currentIndex	array	반환 값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

두번째 인자로 초기값을 제공하는 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

callback	accumulator	currentValue	currentIndex	array	반환 값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20

[OgDoYun]

아래 구문을 모르는 사람은 없다. 이 경우는 배열을 더하는 경우만 사용할 수 있다.

['a','r','r','a','y'].reduce((p, c) => p + c)

하지만 reduce를 활용? 응용할 수 있도록, mdn 문서를 차근차근 이해하면서 읽을 수 있도록 능력을 길러야 겠다.

[OgDoYun]

모바일 테스트