JavaScript에서 reduceRight() 메서드를 사용하면 배열의 요소에 대해 오른쪽에서 왼쪽 방향으로 함수를 순차적으로 적용하여, 배열 전체를 하나의 값으로 줄일 수 있습니다. 일반적인 reduce()가 왼쪽에서 오른쪽으로 처리하는 것과 달리, reduceRight()는 배열의 마지막 요소부터 시작한다는 점이 특징입니다.
reduceRight() 메서드의 매개변수
- callback − 배열의 각 요소에 대해 실행할 함수입니다. 이 콜백은 누적값(accumulator), 현재값(current value), 현재 인덱스(index), 원본 배열(array)의 네 가지 인수를 받습니다.
- initialValue − (선택 사항) 콜백의 첫 번째 호출에서 첫 번째 인수로 사용될 초기값입니다. 생략하면 배열의 마지막 요소가 초기 누적값으로 사용됩니다.
사용 예제
다음 코드를 실행하면 reduceRight() 메서드의 동작 방식을 확인할 수 있습니다. 아래 예제는 구형 브라우저 환경을 고려한 폴리필(polyfill) 구현과 함께, 배열 [0, 1, 2, 3]의 모든 요소를 더하는 실제 사용 예를 보여줍니다.
<html>
<head>
<title>JavaScript Array reduceRight Method</title>
</head>
<body>
<script>
if (!Array.prototype.reduceRight)
{
Array.prototype.reduceRight = function(fun /*, initial*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
// no value to return if no initial value, empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len - 1;
if (arguments.length >= 2)
{
var rv = arguments[1];
} else {
do
{
if (i in this)
{
rv = this[i--];
break;
}
// if array contains no values, no initial value to return
if (--i < 0)
throw new TypeError();
}
while (true);
}
for (; i >= 0; i--)
{
if (i in this)
rv = fun.call(null, rv, this[i], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; });
document.write("total is : " + total );
</script>
</body>
</html>실행 결과
total is : 6
동작 원리 이해하기
위 예제에서 [0, 1, 2, 3] 배열에 reduceRight()가 적용되면 다음과 같은 순서로 연산이 진행됩니다.
- 초기 누적값이 없으므로 배열의 마지막 요소 3이 시작값이 됩니다.
- 다음으로 왼쪽 요소인 2와 결합: 3 + 2 = 5
- 그다음 1과 결합: 5 + 1 = 6
- 마지막으로 0과 결합: 6 + 0 = 6
참고로, 최신 브라우저와 Node.js에는 reduceRight()가 기본 내장되어 있으므로 위의 폴리필 부분은 ES3 같은 매우 오래된 환경을 지원할 때만 필요합니다. 현대적인 코드에서는 다음과 같이 간결하게 작성할 수 있습니다.
const total = [0, 1, 2, 3].reduceRight((a, b) => a + b); console.log(total); // 6