[ JavaScript ]reduce

M_yeon·2022년 10월 25일
0

javascript

목록 보기
14/15
post-thumbnail

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

리듀서 함수는 네 개의 인자를 가집니다.

  • 누산기 (acc)
  • 현재 값 (cur)
  • 현재 인덱스 (idx)
  • 원본 배열 (src)
    리듀서 함수의 반환 값은 누산기에 할당되고,
    누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.
// reduce
const numbers = [1, 2, 3, 4];

numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
  return 다음누산값;
}, 초기누산값);

콜백 함수

첫 번째는 mapforEach처럼 콜백 함수를 전달받는데, 이 콜백 함수의 파라미터가 map, forEach와 조금 다르다.

reduce 메서드가 특별한 이유는 바로 이 콜백 함수의 첫 번째 파라미터인데, reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다.

그러고 나서 마지막 콜백 함수가 동작한 이후의 return 값이 reduce 메서드return 값이 되는 것이다.

나머지 2,3,4번째 파라미터는 map, forEach 메소드의 1,2,3번째 파라미터와 역할이 동일하다.

그렇기 때문에 콜백 함수의 파라미터 생략은, 3,4번째 파라미터만 가능하다.

초기(누산) 값

reduce 메서드의 두 번째 파라미터는 초기값이다. 콜백함수가 동작하면서 해당 함수의 리턴값이 다음 콜백함수의 첫번째 파라미터로 전달되는데, 이 원리대로라면 가장 첫 번째 동작하는 콜백함수의 첫 번째 파라미터는 전달 받는 값이 없다.

그래서 reduce 메서드의 이 두번째 파라미터에, 첫 번째 콜백함수에서 동작할 누산값을 전달해 주는 것이다.


  • reduce 메서드는 현재 콜백 함수의 리턴값이 다음 콜백함수의 동작에 영향을 끼칠 수 있는 독특한 동작 방식을 가진 메서드이다.

  • reduce 메서드가 꼭 필요한 경우가 흔치 않을 수도 있겠지만, 꼭 필요한 경우가 아니더라도 다양한 상황에서 유용하게 활용될 수 있을 것 같다.

0개의 댓글