reduceRight 메서드는 자바스크립트 배열의 반복을 위한 것이다. 배열의 우측에서 좌측으로 반복하며 각 요소를 하나씩 접근한다. total 이란 인자값은 초기값이면서 누적된다. reduce 메서드와 비교된다. 기본적으로 제공되는 인자값은 4가지이며, 이를 가지고 배열을 반복하며 데이터를 가공할 수 있다.
자바스크립트 배열 반복
reduceRight 메서드 사용
자바스크립틔 reduceRight 메서드는 reduce 메서드와 마찬가지로 자바스크립 배열을 순환한다.
하나하나의 값을 처음부터 끝까지 순환하면서 각 요소의 값을 가공할 수 있다.
reduce 메서드가 배열의 가장 처음 요소의 값을 초기값으로 하고 있다면
reduceRight 메서드는 배열의 가장 마지막 요소의 값을 초기값으로 하고 있다.
메서드의 이름그대로 reduceRight 메서드는 배열의 오른쪽부터 왼쪽으로 순환한다.
제공되는 인자값
reduceRight 메서드는 reduce 메서드와 마찬가지로 4가지 인자값을 제공받는다.
total, value, index, array 이다.
각 인자값의 의미는 아래와 같다.
- total : 초기값 또는 누적값
- value : 배열이 반복될 때의 값
- index : 배열이 반복될 때의 인덱스
- array : 배열 자체
let vValue = Array.reduceRight(fnCallback);
function fnCallback(total, value, index, array) {
console.log(`total : ${total} , value : ${value}`);
return total + value;
}샘플 코드
위에서 언급한 것은 덧셈이지만 뺄셈도 되고 문자열 합치기도 된다.
데이터의 가공은 개발자의 의도에 따라 달라질 수 있다.
단지 total 인자값에 지정된 초기값에 자바스크립트 배열이 반복되면서 누적된다는 사실을 기억하자.
이제 자바스크립트 예제를 만들어 본다.
<!DOCTYPE html>
<html>
<body>
<script>
console.log('----------');
let vArray = [10, 100, 1000, 10000];
let vSum = vArray.reduceRight(fnCallbackReduceRight);
function fnCallbackReduceRight(total, value, index, array) {
console.log(`total : ${total} , value : ${value}`)
return total + value;
}
console.log(`array : [ ${vArray} ]`);
console.log(`summary : ${vSum}`);
console.log('----------');
</script>
</body>
</html>결과화면을 보고 자바스크립트 배열이 reduceRight 메서드로 어떻게 반복되는지 살펴본다.
배열의 가장 마지막부터 반복되면서 덧셈을 하고 있는 것을 볼 수 있다.
또한 reduceRight 메서드는 초긱밧을 지정할 수도 있다.
<!DOCTYPE html>
<html>
<body>
<script>
/*
https://www.w3schools.com/js/js_array_iteration.asp
*/
console.log('----------');
let vArray = [10, 100, 1000, 10000];
let vSum = vArray.reduceRight(fnCallbackReduceRight, 100000);
function fnCallbackReduceRight(total, value, index, array) {
console.log(`total : ${total} , value : ${value}`)
return total + value;
}
console.log(`array : [ ${vArray} ]`);
console.log(`summary : ${vSum}`);
console.log('----------');
</script>
</body>
</html>reduceRight 메서드르 주목하자
100000 란 값을 초기값으로 주었다.
초기값만 추가되었을 뿐, 동작에는 문자없다.
결과화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 반복 some 메서드 사용 Using java iteration some method (0) | 2022.01.24 |
|---|---|
| 자바스크립트 배열 반복 every 메서드 사용 Using java iteration every method (0) | 2022.01.21 |
| 자바스크립트 배열 반복 초기값 지정 reduce 메서드 사용 (0) | 2022.01.13 |
| 자바스크립트 배열 반복 filter 메서드 사용 Using javascript iteration filter method (0) | 2022.01.10 |
| 자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method (0) | 2022.01.08 |
댓글