자바스크립트 배열 reduce 함수

배열에서 reduce() 함수는
배열을 순회하면서 콜백 함수를 사용하여 배열을 하나의 값으로 반복적으로 줄여(reduce) 단일 값으로 반환합니다.

 

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

특징

• 배열의 요소를 순회하며 하나의 값으로 줄이는 로직을 콜백 함수에 작성합니다.
• 각 단계에서 줄인 값은 return 키워드로 반환됩니다.
• 반환된 값은 다음 순회에서 누적 값으로 사용되며, 같은 로직으로 계속 줄입니다.
• 원본 배열은 그대로 유지되며, 최종적으로 반복적으로 줄인 단일 값이 반환됩니다.

예제

/**
 * 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

 

구문

arr.reduce(callbackFn[, initialValue])

 

callbackFn

배열의 각 요소를 처리하는 콜백 함수입니다.
콜백 함수의 매개변수: callbackFn(accumulator, currentValue[, currentIndex[, array]])

• accumulator: 이전 반복의 반환값을 보유하며, 첫 번째 반복(iteration)에서는 초깃값(initialValue)의 값을 가집니다.
• currentValue: 현재 반복(iteration)에서 처리 중인 배열의 요소의 값을 가집니다.
• currentIndex: 옵션. 현재 처리 중인 배열 요소의 인덱스입니다.
• array: 옵션. reduce() 함수를 호출한 배열입니다.

initialValue

옵션. 초기 누적 값입니다.
이 매개변수를 생략하면 첫 번째 배열 요소가 초기 누적 값으로 사용됩니다.

 

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

// 화살표 함수
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가 전달되지 않으면 오류가 발생합니다.

 

활용

배열의 모든 요소를 더하기

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

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

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

 

배열의 모든 요소를 곱하기

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

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

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

 

배열의 최솟값 찾기

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

 

배열의 최댓값 찾기

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

 

또 다른 출처 정보

https://codingeverybody.jp/javascript-array-reduce-function/

JavaScript 配列 reduce() 関数：配列を一つの結果値にまとめる - codingEverybody

 

https://coding.courses/javascript-array-reduce-function/

JavaScript Array reduce() Function – Reducing an Array to a Single Value - codingCourses