Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.

reduce(callbackFn, initialValue?)

1. callbackFn 콜백 파라미터
   • accumulator : 이전 callbackFn 반환값
     • 초기값 지정시 콜백을 처음 호출했을 때 값 : initialValue
     • 초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]
   • currentValue : 현재 순회하고 있는 값
     • 초기값 지정시 콜백을 처음 호출했을 때 값 : array[0]
     • 초기값 미지정시 콜백을 처음 호출했을 때 값 : array[1]
   • currentIndex : 현재 순회하고 있는 값의 인덱스
   • array : reduce를 호출한 배열
2. initialValue (초기값) : callbackFn 콜백을 처음 호출할 때 accumulator에 사용할 초기값. 미지정시 배열(array) 첫 번째 인자를 초기값으로 사용. 초기값 지정시 배열 첫 번째 요소는 순회에 포함 안 함.

숫자 더하기 | Summing Numbers

reduce() 메서드의 가장 기본적인 사용 예시. 숫자로 이뤄진 배열이 주어졌을 때 모든 수를 더한 값을 반환한다.

const odds = [1, 3, 5, 7, 9, 11];
const sumOfOdds = odds.reduce((acc, cur) => acc + cur);
console.log(sumOfOdds); // 36

배열 펼치기 | Flattening Arrays

Array.flat()은 중첩된 배열을 펼쳐서 단일 배열로 만드는 메서드다. reduce()를 이용하면 flat() 메서드와 동일하게 구현할 수 있다.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.reduce((acc, cur) => acc.concat(cur), []);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

위 예시는 기본적으로 1 depth만 펼칠 수 있다. 2 depth 이상 중첩된 배열이라면 재귀를 이용하면 된다.

const nestedArray = [1, 2, [3, 4, [5, 6]]];

const deepFlat = (arr) => {
	return arr.reduce((acc, cur) => {
		return acc.concat(Array.isArray(cur) ? deepFlat(cur) : cur);
	}, []);
};

const flattenedArray = deepFlat(nestedArray);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

객체 그룹핑 | Grouping Objects

객체를 요소로 갖는 배열에서, 특정 프로퍼티를 기준으로 그룹핑(Grouping) 해야 하는 상황을 자주 접한다. 예를 들어 아래처럼 age 연령별로 그룹을 나누는 상황을 생각해 볼 수 있다.

// 원본 배열
[
  { name: "A", age: 20 },
  { name: "B", age: 30 },
  { name: "C", age: 20 },
  { name: "D", age: 30 },
];

// 연령별로 그룹핑
{
	20: [{ name: "A", age: 20 }, { name: "C", age: 20 }],
	30: [{ name: "B", age: 30 }, { name: "D", age: 30 }],
}