Array.prototype.reduce() 사용법

reduce() 함수는
배열의 모든 요소에 콜백 함수를 적용하여 하나의 결과 값을 생성하는 함수입니다.

reduce() 함수는 배열의 요소들을 하나로 줄여(reduce) 집계한 값을 반환합니다.

JavaScript 
/**
 * reduce() 함수를 사용해서
 * 배열의 모든 요소를 더해 누적된 하나의 값을 생성하는 예제
 */

// reduce() 함수를 적용할 배열
const numbers = [1, 2, 3, 4, 5];

// 개발자가 직접 작성한 콜백 함수
function sum(total, number) {
	// 이전의 결과 값과 현재 요소를 더합니다.
	return total + number;
}

// 배열의 모든 요소에 콜백 함수를 적용하여 집계한 하나의 결과 값을 반환
const result = numbers.reduce(sum);
console.log(result); // 출력: 15

reduce() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
arr.reduce(callbackFn[, initialValue])

arr은 reduce() 함수를 적용할 배열입니다.

매개변수

reduce() 함수의 매개변수 설명
callbackFn 배열의 각 요소를 처리하는 콜백 함수입니다.
콜백 함수의 매개변수: callbackFn(accumulator, currentValue[, currentIndex[, array]])
  • accumulator: 이전 반복의 반환값을 보유하며, 첫 번째 반복(iteration)에서는 초깃값(initialValue)의 값을 가집니다.
  • currentValue: 현재 반복(iteration)에서 처리 중인 배열의 요소의 값을 가집니다.
  • currentIndex: 옵션. 현재 처리 중인 배열 요소의 인덱스입니다.
  • array: 옵션. reduce() 함수를 호출한 배열입니다.
initialValue 옵션. 초기 누적 값입니다.
이 매개변수를 생략하면 첫 번째 배열 요소가 초기 누적 값으로 사용됩니다.

첫 번째 매개변수인 콜백 함수(callbackFn)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.

JavaScript 
// 화살표 함수
reduce((accumulator) => { /* … */ })
reduce((accumulator[, currentValue]) => { /* … */ })
reduce((accumulator[, currentValue[, currentIndex[, array]]]) => { /* … */ })

// 콜백 함수
reduce(callbackFn)
reduce(callbackFn[, initialValue])

// 인라인 콜백 함수
reduce(function (accumulator) { /* … */ })
reduce(function (accumulator[, currentValue]) { /* … */ })
reduce(function (accumulator[, currentValue[, currentIndex[, array]]]) { /* … */ })
reduce(function (accumulator[, currentValue[, currentIndex[, array]]]) { /* … */ }[, initialValue])

반환 값

결과 값을 반환합니다.
배열이 비어 있고 initialValue이 전달되지 않으면 오류가 발생합니다.

콜백 함수의 작동 원리

JavaScript 콜백 함수의 매개변수 
callbackFn(accumulator, currentValue[, currentIndex[, array]])
JavaScript reduce() 함수에서 사용하는 콜백 함수의 구조 
/**
 * 콜백 함수
 *
 * 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
 * (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
 */

/* 콜백 함수를 기명 함수를 사용할 경우 */
function callbackFn(accumulator, currentValue[, currentIndex[, array]]) { // 기명 함수 정의
	// 누적된 하나의 값 로직: 누적된 결과를 반환해야 합니다.
}

arr.reduce(callbackFn); // 정의한 기명 함수명을 매개변수에 직접 전달

/* 콜백 함수를 익명 함수로 사용할 경우 */
arr.reduce(function (accumulator, currentValue[, currentIndex[, array]]) {
    // 누적된 하나의 값 로직: 누적된 결과를 반환해야 합니다.
});
자바스크립트 화살표 함수의 이해와 사용법

reduce() 함수의 콜백 함수는 배열의 각 요소에 대해 호출되며, 이전 단계에서 계산한 값을 누적(축적)하는 역할을 합니다. 콜백 함수의 작동 원리를 자세히 설명하겠습니다.

  1. 첫 번째 반복(iteration): reduce() 함수가 호출되면 먼저 초기값(initialValue)과 배열의 첫 번째 요소가 콜백 함수로 전달됩니다.
    • accumulator: 초기값(initialValue)의 값이 accumulator 변수에 할당됩니다.
    • currentValue: 배열의 첫 번째 요소의 값이 currentValue 변수에 할당됩니다.
    • 콜백 함수가 호출되고, 이전 반복의 결과값(accumulator)과 현재 요소(accumulator)를 활용하여 새로운 값을 반환합니다.
  2. 두 번째 반복(iteration)부터: 이후의 반복에서는 초기값(initialValue)은 사용되지 않습니다. 대신, 이전 반복의 결과값(accumulator)과 현재 요소(currentValue)가 콜백 함수로 전달됩니다.
    • accumulator: 이전 반복에서 반환된 값(이전 결과 값)이 accumulator 변수에 할당됩니다.
    • currentValue: 다음 배열 요소의 값이 currentValue 변수에 할당됩니다.
    • 콜백 함수가 호출되고, 이전 반복의 결과값(accumulator)과 현재 요소(currentValue)를 활용하여 새로운 값을 반환합니다.
  3. 반복 종료: 배열의 모든 요소가 처리될 때까지 이 반복과 결과 값의 계산이 반복됩니다.
  4. 최종 결과 반환: 배열의 모든 요소가 처리된 후, reduce() 함수는 마지막 콜백 함수 호출의 반환값을 최종 결과 값으로 반환합니다.

이러한 과정을 통해 배열의 요소를 순회하면서 콜백 함수를 반복적으로 호출하고, 그 결과를 누적하여 최종 결과 값을 집계합니다. 콜백 함수 내에서는 현재 요소와 이전 단계에서의 결과를 이용하여 원하는 연산을 수행할 수 있습니다.

reduce() 함수의 콜백 함수의 작동 원리를 설명할 때 currentIndex와 array 매개변수는 선택 사항(옵션)이므로 필요에 따라 사용될 수 있는 것을 강조하지 않았습니다. 이 두 매개변수는 콜백 함수에서 필요한 경우에만 선택적으로 활용할 수 있습니다.

다양한 활용 사례

reduce() 함수는 주로 다음과 같은 예제의 목적으로 사용됩니다.

배열의 모든 요소를 더하기

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const sum = (total, number) => {
	return total + number;
}

const result = numbers.reduce(sum);
console.log(result); // 출력: 15

배열의 모든 요소를 곱하기

JavaScript 
const numbers = [2, 3, 4, 5];

const sum = (total, number) => {
	return total * number;
}

const result = numbers.reduce(sum, 1);
console.log(result); // 출력: 120

위의 코드에서는 초기 누적 값으로 1을 사용하고, 각 요소를 곱하여 결과를 누적합니다. 초기 누적 값을 0으로 설정하면 모든 값이 0으로 곱해지므로 1을 사용하는 것이 중요합니다.

배열의 최솟값 찾기

JavaScript 
const numbers = [5, 3, 9, 2, 7];

const min = (min, item) => {
    return (item < min) ? item : min;
}

const result = numbers.reduce(min, numbers[0]);
console.log(result); // 출력: 2

위의 코드에서는 초기 누적 값을 배열의 첫 번째 요소인 $numbers[0]으로 설정하고, 콜백 함수에서 현재 요소가 누적 값보다 작으면 현재 요소를 최솟값으로 선택합니다.

배열의 최댓값 찾기

JavaScript 
const numbers = [5, 3, 9, 2, 7];

const max = (max, item) => {
    return (item > max) ? item : max;
}

const result = numbers.reduce(max, numbers[0]);
console.log(result); // 출력: 9

위의 코드에서도 초기 누적 값을 배열의 첫 번째 요소로 설정하고, 콜백 함수에서 현재 요소가 누적 값보다 크면 현재 요소를 최댓값으로 선택합니다.

배열을 반환하는 방법

reduce() 함수를 사용하여 배열을 반환하는 방법은 콜백 함수 내에서 배열에 값을 추가하고 누적하는 방식으로 구현할 수 있습니다. 여기에 간단한 예제를 제시하겠습니다. 이 예제에서는 배열의 각 요소를 제곱하여 새로운 배열을 생성합니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const square = (accumulator, currentValue) => {
    // 현재 요소의 제곱 값을 계산하고 배열에 추가
    accumulator.push(currentValue * currentValue);
    return accumulator; // 누적된 배열을 반환
}

const squaredArray = numbers.reduce(square, []);

console.log(squaredArray); // 출력: [1, 4, 9, 16, 25]

코드 부연설명
push() 함수는 배열의 끝에 하나 이상의 요소를 추가(push, 뒤에서 밀어 넣기)하는 함수입니다.

이 예제에서, reduce() 함수는 빈 배열([])을 초기값으로 사용하고, 콜백 함수 내에서 각 요소를 제곱한 값을 accumulator 배열에 push() 함수를 사용해서 추가합니다. 최종적으로 누적된 배열이 반환되어 squaredArray 변수에 저장됩니다.

주어진 예제에서는 map() 함수를 사용하는 것이 더 간단하고 명확할 것입니다.

코드 부연설명
map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환합니다.

map() 함수는 배열의 각 요소에 함수를 적용하고 그 결과로 새로운 배열을 생성하는 데에 특히 유용합니다. 아래는 동일한 작업을 map() 함수를 사용하여 수행하는 예제입니다.

JavaScript reduce() 함수 대신 map() 함수 사용 
const numbers = [1, 2, 3, 4, 5];

const square = (currentValue) => {
    return currentValue * currentValue;
}

const squaredArray = numbers.map(square);

console.log(squaredArray); // 출력: [1, 4, 9, 16, 25]

map() 함수를 사용하면 요소 변환 작업이 명확하게 표현되며, 배열을 새로운 배열로 매핑할 때 사용하기에 더 적합합니다. reduce() 함수는 배열을 누적하거나 변환할 때 더 복잡한 작업에 유용합니다. 따라서 작업에 따라 더 적절한 함수를 선택하는 것이 중요합니다.

이러한 함수들은 코드를 더 읽기 쉽게 만들고, 작업을 간결하게 표현하는 데 도움을 줄 수 있습니다. 각 함수의 용도를 이해하고 적절하게 활용하는 것은 프로그래밍에서 중요한 스킬 중 하나입니다.

명세서

reduce() 함수에 대한 명세서 사양
명세서 사양
reduce() ECMAScript Language Specification
#sec-array.prototype.reduce

브라우저 호환성

reduce() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
reduce() 3 12 3 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기