목차
- array.reduce() 예제 - 배열 각 요소에 함수 실행 후 단일값 반환
- array.reduce() 정의
- array.reduce() 구문
- array.reduce() 예제 - 배열값 반올림 후 합산
- array.reduce() 예제 - 배열값 합산
array.reduce() 예제 - 배열 각 요소에 함수 실행 후 단일값 반환
<p id="demo"></p>
<script>
var nums = [150, 50, 25];
document.getElementById("demo").innerHTML = nums.reduce(homzzang);
function homzzang(total, value) {
return total - value;
}
</script>
결과값: 75
PS1. 코드 동작 순서
- initialValue 없으므로, (total은 첫번째 배열값부터 / currentValue은 두번째 배열값부터) 시작.
- 50 경우, 150 - 50 = 100 (※ 세 번째 배열값 25의 total값이 됨)
- 25 경우, 100 - 25 = 75
PS2. 즉, 아래 코드와 동일 방식으로 작동.
<p id="demo"></p>
<script>
var nums = [50, 25];
document.getElementById("demo").innerHTML = nums.reduce(homzzang, 150);
function homzzang(total, value) {
return total - value;
}
</script>
결과보기
array.reduce() 정의
각각의 배열값에 대해 콜백함수 적용 후, 누적단일값 반환.
1.
- 왼쪽에 있는 배열값부터 함수 적용. 단, initialValue (= 초기값) 존재 유무에 따라 적용 시작 배열값이 다름.
- initialValue (= 초기값) 없는 경우, 인덱스 1 (= 2번째 배열값)부터 시작해 콜백함수 실행. (※ 첫 번째 인덱스는 건너 뜀.)
- initialValue (= 초기값) 있는 경우, 인덱스 0 (= 1번째 배열값)부터 시작.
- 빈 배열요소에 대해선 콜백함수 실행 X
- 원래 배열을 변경 X
2. cf.
array.reduceRight() 메서드 - 오른쪽 배열값부터 콜백함수 적용 후, 누적 단일값 반환.
3.
- ECMAScript5 (ES5: JavaScript 2009)
- IE9 이상 주요 최신 브라우저 지원.
4. MDN reduce() 예제보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
array.reduce() 구문
array.reduce(function(total, value, key, arr), initialValue)
[매개변수]
function(total, value, key, arr)
필수. 각각의 배열값에 대해 실행할 함수
total
필수. initialValue (= 초기값) 또는, 앞서 반환한 함수 결과값
- initialValue 있는 경우, total은 initialValue (=초기값)부터 시작.
- initialValue 없는 경우, total는 첫번째 배열값부터 시작.
value
필수. 현재요소의 배열값
- initialValue 있는 경우, value는 첫번째 배열값부터 시작.
- initialValue 없는 경우, value는 두번째 배열값부터 시작.
key
선택. 현재요소의 배열키.
- initialValue 있으면 0부터 시작.
- initialValue 없으면 1부터 시작.
arr
선택. 현재요소가 속한 배열객체
initialValue
선택. 초기값으로 함수에 전달된 값.
- total과 currentValue의 시작을 어디서부터 할지 결정.
array.reduce() 예제 - 배열값 반올림 후 합산
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
var nums = [3.5, 4.3, 5.1, 6.7];
function getSum(total, num) {
return total + Math.round(num);
}
function homzzang(item) {
document.getElementById("demo").innerHTML = nums.reduce(getSum, 0);
}
</script>
결과값: 20
PS. 코드 동작 순서
- 초기값 0 있으므로, 0부터 total 시작. 첫번째 배열값부터 currentValue 시작
- 3.5 경우 : 0 + 4 (반올림값) = 4 (※ 4.3의 total 독립변수)
- 4.3 경우 : 4 + 4 (반올림값) = 8 (※ 5.1의 total 독립변수)
- 5.1 경우 : 8 + 5 (반올림값) = 13 (※ 6.7의 total 독립변수)
- 6.7 경우 : 13 + 7 (반올림값) = 20
array.reduce() 예제 - 배열값 합산
<script>
var nums = [1, 2, 3, 4];
var x = nums.reduce(sum);
function sum(a, b) {
return a + b;
}
document.write(x);
</script>
결과값: 10
PS. 코드 동작 순서
- 초기값 없으므로 첫번째배열값부터 total 시작, 두 번째 배열값부터 currentValue 시작.
- 2 경우: 1 + 2 = 3 (※ 3의 a 매개변수)
- 3 경우: 3 + 3 = 6 (※ 4의 a 매개변수)
- 4 경우: 6 + 4 = 10
