[JS] reduce로 배열 수정하기 reduce에 관한 이해, 사용법 및 예제

reduce()란

reduce() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고 그 결과를 하나의 값으로 축소(reduce)하는 역할을 하는 메서드입니다.

reduce()를 이용하여 배열의 요소를 합치거나, 평균을 구하거나, 최대/최솟값을 찾는 등 다양한 연산을 할 수 있습니다.

reduce() 사용법

reduce()의 문법은 다음과 같습니다

array.reduce(callback, initialValue)

위 요소들에 대한 설명입니다.

1. array(배열) : reduce()를 사용할 배열입니다.
2. callback(콜백 함수) : 배열의 각 요소에 대해 실행되는 콜백 함수로 4개의 인수를 받습니다.
   1. accumulator(누적 값) : 콜백 호출의 반환 값 또는 초기 값입니다.
   2. currentValue(현재 요소) : 현재 순회 중인 배열의 요소입니다.
   3. currentIndex(현재 인덱스) : 현재 순회 중인 요소의 인덱스입니다.
   4. array(원본 배열) : reduce()가 호출되는 배열 자체입니다.
3. initialValue(선택 사항) : reduce() 메서드의 두 번째 인수로, reduce()가 시작될 때 사용하는 초기 값입니다.
   만약 초기값이 제공되지 않으면 array의 첫 번째 요소를 초기 값으로 사용하고 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

reduce() 예제

배열의 합 구하기

const 숫자배열 = [1,2,3];

const 합계 = 숫자배열.reduce((누적값, 현재요소) => 누적값 + 현재요소, 0);
//위의 경우 initialValue, 즉 초기 값이 0
//처음 reduce로 callback함수(누적값 + 현재요소)를 돌며 초기값 0에 숫자배열의 첫 요소인
//1이 더해지고 누적값(1)에 2가 더해지고 누적값이 3이됩니다.
//이후 누적값(3)에 3이 더해지게 됩니다.

console.log(합계) // 6

배열의 곱 구하기

const 숫자배열 = [1,2,3,4,5];

const 곱하기 = 숫자배열.reduce((누적값, 현재요소) => 누적값 * 현재요소, 1);

console.log(곱하기) // 120

배열의 최댓값/최솟값 찾기

const 숫자배열 = [3,12,23,4,15];

const 최댓값 = 숫자배열.reduce((누적값, 현재요소) => Math.max(누적값, 현재요소), 숫자배열[0]);
const 최솟값 = 숫자배열.reduce((누적값, 현재요소) => Math.min(누적값, 현재요소), 숫자배열[0]);

console.log(최댓값) // 23
console.log(최솟값) // 3

객체 배열의 속성 합산하기

const 객체배열 = [
{NAME:'춘식', AGE:5},
{NAME:'라이언', AGE:12},
{NAME:'어피치', AGE:11},
];

const 나이합계 = 객체배열.reduce((누적값, 현재요소) => 누적값 + 현재요소.AGE, 0)

console.log(나이합계) // 28

혹시나 위 객체 배열에서 NAME만 모아서 배열을 만들고 싶다면 reduce()가 아닌 map을 쓰는 게 좋음

const 이름들 = 객체배열.map((obj) => obj.NAME);

console.log(이름들) // ['춘식','라이언','어피치']

 

정리

reduce() 메서드는 배열을 다룰 때 유용한 기능을 제공하며 배열의 요소들을 합치거나 축소하는 작업을 쉽게 수행할 수 있습니다. 

콜백함수를 활용하여 다양한 연산을 적용할 수 있으며 초기값을 사용하여 원하는 초기상태를 설정할 수 있습니다.