Programming/Javascript, Typescript

[Javascript] reduce() 함수

리버김 2023. 1. 2.
회사에서 개발하던 중 리스트의 요소들을 누적하여 다시 return하고 싶은 경우가 있었다. 이를 테면 조각조각 떨어져 있는 URL 안의 요소들을 합치고 싶을 때다. 이럴 때는 map 함수가 아니라 reduce 함수를 쓰면 가장 효율적으로 구현할 수 있다.

정의

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

 

예시

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

 

리듀서 함수란?

arr.reduce(callback[, initialValue])

 

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

  1. 누산기 (acc)
  2. 현재 값 (cur)
  3. 현재 인덱스 (idx)
  4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

 

 

Array.prototype.reduce() - JavaScript | MDN

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

developer.mozilla.org

댓글