배열 reduce() 사용법 및 예제

자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다.

 

reduce()

문법 : arr.reduce(callback[, initialValue])

 

파라미터

callback function : 4가지의 인수를 가진다.

callback함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환합니다.

• accumulator accumulator는 callback함수의 반환 값을 누적한다.
• currentValue 배열의 현재 요소
• index(Optional) - 배열의 현재 요소의 인덱스
• array(Optional) - 호출한 배열

initialValue(Optional)

최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기 값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기 값이 없을 경우 에러가 발생합니다.

reduce() 함수 활용

배열의 합 구하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum1 =', sum1);
// sum = 55

 

또는

function sumReducer(accumulator, currentNumber) {
  return accumulator + currentNumber;
}

const sum2 = numbers.reduce(sumReducer);
console.log('sum =', sum2);
// sum = 55

 

오브젝트 배열에서 원하는 항목의 값만 더하기

⭐initialValue가 없으면 배열의 2번째부터 계산이 시작되는데 배열이 비어있으면 당연히 TypeError가 발생하여 초기 값인 0을 넣어야 한다.

const users = [
  {
    user: 'a',
    age: 20,
  },
  {
    user: 'b',
    age: 40,
  },
  {
    user: 'c',
    age: 25,
  }
];


// 여기서 초기값 설정이 반드시 필요하다.
const ageSum = users.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
}, 0);

console.log('users age', ageSum);
//"users age" 85

 

배열의 최대 값 구하기

자바스크립트에서 -Infinity는 음수의 무한대를 나타내는 특수한 값이다.

코드에서 -Infinity는 reduce() 함수의 초기 값으로 사용되었다. 즉, 초기 값은 그냥 음수다. 초기 값은 reduce() 함수의 두 번째 인자로 전달되고, 이 값은 누적 값(accumulator)의 초기 값을 설정하는 데 사용된다.

Math.max() 함수는 주어진 숫자들 중에서 가장 큰 값을 반환하는데, 초기 값이 -Infinity로 설정되면 배열의 첫 번째 요소부터 시작해서 큰 값을 찾아가게 된다. 즉, 배열의 첫 번째 요소인 10부터 비교를 시작하며, -Infinity(음수)보다 큰 값이 나타나면 해당 값이 누적 값으로 설정된다.

const numbers = [10, 20, 8, 1, 9];
const max = numbers.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue), -Infinity);
console.log(max);
// 20

 

배열 각 요소의 문자열 길이 구하기

reduce() 함수를 호출할 때 사용되는 콜백 함수는 (a, b) => [...a, b.length] 이다. 이 콜백 함수는 두 개의 매개변수 a와 b를 받으며, a는 현재까지의 누적 값이고 b는 배열의 현재 요소이다.

콜백 함수에서 [...a, b.length]는 현재까지의 누적 배열 a에 현재 요소 b의 길이(b.length)를 추가한 새로운 배열을 생성한다. 초기 값이 빈 배열로 주어졌으니 처음 누적 값은 없는 채로 시작한다.

reduce() 함수에서 두 번째 매개변수에 빈 배열( [] )을 전달하고, 순회하면서 문자열의 길이를 누적해 가며 최종적으로 생성된 배열을 반환한다.

const str = ["Hello", "World", "JavaScript"];
const arr = str.reduce((a, b) => [...a, b.length], []);

console.log(arr);
// [5,5,10]

 

 

참고

Array.prototype.reduce() - JavaScript | MDN