JavaScript에서 reduce() 메서드를 사용하면 배열의 두 값에 대해 왼쪽에서 오른쪽 방향으로 함수를 순차적으로 적용하여, 배열 전체를 하나의 값으로 줄일 수 있습니다. 배열의 합계 구하기, 누적 계산 등 다양한 상황에서 유용하게 활용됩니다.
reduce() 메서드의 주요 매개변수
- callback − 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 누적값(accumulator)과 현재값(current value)을 인자로 받습니다.
- initialValue − 콜백 함수의 첫 번째 호출 시 첫 번째 인자로 사용할 초기값입니다. 생략하면 배열의 첫 번째 요소가 초기값으로 사용됩니다.
예제
아래 코드를 실행하면 reduce() 메서드가 동작하는 방식을 직접 확인할 수 있습니다. 이 예제는 구형 브라우저 환경을 고려해 Array.prototype.reduce가 없는 경우 폴리필(polyfill)로 직접 구현한 뒤, 배열 [0, 1, 2, 3]의 모든 요소를 더하는 코드입니다.
<html>
<head>
<title>JavaScript Array reduce Method</title>
</head>
<body>
<script>
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
// 초기값이 없고 빈 배열인 경우 반환할 값이 없음
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[1];
} else {
do {
if (i in this) {
rv = this[i++];
break;
}
// 배열에 값이 없으면 반환할 초기값이 없음
if (++i >= len)
throw new TypeError();
}
while (true);
}
for (; i < len; i++) {
if (i in this)
rv = fun.call(null, rv, this[i], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
document.write("total is : " + total );
</script>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
total is : 6
reduce() 메서드는 배열의 첫 번째 요소부터 마지막 요소까지 콜백 함수를 차례대로 호출하면서 결과를 누적합니다. 최신 브라우저에서는 별도의 폴리필 없이 기본적으로 지원되므로, 일반적인 개발 환경에서는 폴리필 부분 없이 [0, 1, 2, 3].reduce((a, b) => a + b)처럼 간결하게 사용할 수 있습니다.