목차
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 이상 주요 최신 브라우저 지원.
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 있는 경우, 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
