자바스크립트 reduce 메서드는 배열을 반복하면서 누적의 개념으로 연산을 한다. 첫번째 인자값이 초기값이 되어 다음 요소의 값과 비교 또는 연산 등을 할 수 있다. 배열의 반복순서는 좌측에서 우측으로 진행하게 된다.
자바스크립트 배열 반복 초기값 지정
reduce 메서드 사용
reduce 메서드의 사용은 독특하다.
기본적인 인자값을 4개 준다.
이것이 왜 덧셈으로 소개되는지 잘 모르겠다.
코드를 보면 뺄셈도 되고 곱셈도 된다.
아마 인자값 total 때문에 그런 것 같다.
나름 인지도 있는 어떤 사이트에서 힌트를 찾았다.
reduce 메서드에서 제공하는 total 인자값은 초기값이면서 누적값이기 때문에 이름을 그리 지은 것 같다.
reduce 메서드
자바스크립트 배열이 반복될 때 2가지의 수가 반복된다.
reduce 는 초기값을 지정할 수도 있지만 별도로 지정하지 않는다면 배열의 첫번째 요소가 초기값이 된다.
그러면서 누적표현을 사용할 수 있다.
즉 누적값은 total 을 이용해 각 요소들이 반복되면서 덧셈도 할 수 있고, 뺄셈도 할 수 있다.
let vSummary = Array.reduce(fnCallback);
OR
let vSummary = Array.reduce(fnCallback, 초기값);
function fnCallback(total, value, index, array) {
console.log(`${total} + ${value} = ${total + value}`);
return total - value;
}샘플코드
위의 내용으로 자바스크립트 예제를 만들어 본다.
total 은 초기값이 되며, 누적이 될 수도 있다.
모든 수에 대해 뺄셈을 해도 누적의 개념이 된다.
초기값이 없다면 배열의 첫번째 요소가 reduce 메서드의 초기값이 된다.
덧셈과 뺄셈에 대한 코드를 만들어 보고, 초기값도 만들어 본다.
<!DOCTYPE html>
<html>
<body>
<script>
let numbers = [10, 20, 30, 40, 50];
let sum = numbers.reduce(fnCallbackPlus);
console.log(numbers);
console.log(sum);
console.log('----------')
numbers = [10, 20, 30, 40, 50];
sum = numbers.reduce(fnCallbackPlus, 100);
console.log(numbers);
console.log(sum);
console.log('----------')
numbers = [10, 20, 30, 40, 50];
sum = numbers.reduce(fnCallbackSubtract);
console.log(numbers);
console.log(sum);
console.log('----------')
numbers = [10, 20, 30, 40, 50];
sum = numbers.reduce(fnCallbackSubtract, 100);
console.log(numbers);
console.log(sum);
console.log('----------')
function fnCallbackPlus(total, value, index, array) {
console.log(`${total} + ${value} = ${total + value}`);
return total + value;
}
function fnCallbackSubtract(total, value, index, array) {
console.log(`${total} - ${value} = ${total - value}`);
return total - value;
}
console.log('----------')
</script>
</body>
</html>가장 밑에 있는 콜백메서드를 보자.
덧셈과 뺄셈을 하고 있다.
total 은 초기값으로 배열의 첫번째 요소가 되며, 초기값을 별도로 지정할 수 있다.
이렇게 지정되어 배열의 어떤 요소와 그 다음요소가 반복되면서 연산을 할 수 있다.
결과화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 반복 every 메서드 사용 Using java iteration every method (0) | 2022.01.21 |
|---|---|
| 자바스크립트 배열 반복 reduceRight 메서드 사용 (0) | 2022.01.17 |
| 자바스크립트 배열 반복 filter 메서드 사용 Using javascript iteration filter method (0) | 2022.01.10 |
| 자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method (0) | 2022.01.08 |
| 자바스크립트 배열 반복 foreach 메서드 사용 Using javascript iteration foreach method (0) | 2022.01.06 |
댓글