Array.prototype.reduce() 함수 정리

💡 정의와 구문설명을 보며 이해하기 보단, 사용법과 예제를 보며 이해하는 것이 훨씬 수월하다.

정의

MDN에 정의되있는 정의는 다음과 같다.

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

구문 설명

reduce() 메서드는 배열에 사용이 가능하다.

const arr = [1, 2, 3, 4, 5];
const initialValue = 0;

arr.reduce((accumulator, currentValue, currentIndex, array) => { 
	return accumulator + currentValue;
}, initialValue);

reduce() 메서드의 첫 번째 인자는 배열의 각 요소에 대해 실행 할 콜백 함수이다.

두 번째 인자는 콜백 함수의 첫 번째 호출에서 첫 번째 인수에 제공하는 값이다. (필수 x)

콜백 함수는 다음과 같은 인수를 받는다.

• accumulator
  • 누산기 라고 하며, 콜백 함수의 반환값을 누적한다. 직전에 호출된 콜백 함수의 반환값을 나타내거나, 첫 번째 호출이고, initialValue가 있을 경우 initialValue를 반환하기도 한다.
• currentValue
  • 배열의 현재 요소
• currentIndex
  • 배열의 현재 요소의 인덱스. initialValue가 있을 경우 0부터 시작하고, 아니면 1부터 시작한다.
• array
  • 원본 배열

사용법

기본적인 사용법을 나타내는 예제는 배열을 순회하면서 값을 더하는 예제이며, 다음과 같다.

const arr = [2, 4, 6, 8, 10];
const result = arr.reduce((acc, cur) => acc + cur); 
console.log(result);

// 결과
// 30

위 과정을 한 단계씩 로그로 남겨보면 다음과 같다.

const arr = [2, 4, 6, 8, 10];
const result = arr.reduce((acc, cur) => {
	console.log(acc, cur);
	return acc + cur;
});

console.log(result);

// 결과
2 4 // initialValue가 없으므로 acc는 배열의 arr[0] 값, cur은 arr[1]의 값이 들어온다.
6 6 // 콜백 함수에서 acc + cur을 리턴해주므로 acc 에는 누적된 값, cur에는 arr[2]의 값이 들어온다.
12 8 // 이하 반복
20 10

30

예제

reduce()를 단순히 배열을 순회하면서 값을 더하는데에만 사용하기엔 아쉬운 부분이 있다.

실제로 도움이 될 법한 예제 몇가지를 소개한다.

속성으로 객체 분류하기

학생의 정보가 담긴 배열 객체를 학년(grade) 별로 분류하고 싶을 때 다음과 같이 사용할 수 있다.

const students = [
  { name: 'Alice', age: 10, grade: 4 },
  { name: 'Max', age: 9, grade: 3 },
  { name: 'Jane', age: 11, grade: 4 },
  { name: 'John', age: 9, grade: 3 },
];

const groupByGrade = students.reduce((acc, obj) => {
   const key = obj['grade'];
    if (!acc[key]) {
        acc[key] = [];
    }
     
    acc[key].push(obj);
   
    return acc;
}, {});

console.log(groupByGrade);

// 결과
{
	3: [
				{ name: 'Max', age: 9, grade: 3 },
				{ name: 'John', age: 9, grade: 3 },
		 ],
	4: [
				{ name: 'Alice', age: 10, grade: 4 },
				{ name: 'Jane', age: 11, grade: 4 },
		 ]

홀수만 더하기

자주 사용될 로직은 아니지만, 응용하면 알고리즘 문제 풀이에서 도움이 될 수 있다.

const arr = [1, 2, 3, 4, 5];

const result = arr.reduce((acc, cur) => {
    if (cur % 2 !== 0) {
        acc += cur;
    }

    return acc;
}, 0);

console.log(result);

// 결과
9

특정 값을 제외하고 더하기

특정 값이 담긴 배열의 값들을 제외한 값들을 더하고자 할 때

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const notWant = [1, 4, 10];

const result = numbers.reduce((acc, cur) => notWant.includes(cur) ? acc : acc += cur , 0);

console.log(result);

// 결과
40