Array.prototype.reduce VS for loop
Array.prototype.reduce Syntax
arr.reduce(callback [, initialValue] )
|
[1, 2, 3].reduce(function(previousValue, currentValue, index, array){
....
return currentValue
}, '');
- previousValue : initialValue(사용자가 정의한 초기값) 혹은 currentValue의 이전 index 값 ( arr[index-1] );
처음 실행시 초기값이 있으면 초기값이 전달 되며, 초기값이 없을 경우 배열의 0번째 index 배열값이 전달 된다.
이후 항상 currentValue의 이전 index 배열값이 전달 된다. - currentValue : 배열의 현재 값
- index : 현재 배열의 인덱스
- array : reduce method가 호출된 배열
- initialValue : 초기값 위에서는 '' 으로 되어 있음.
var array = [1, 5, 10, 15, 20];
/* 초기값(initialValue)이 없을 때의 Array.prototype.reduce의 파라미터 값 확인 */
array.reduce(function(previousValue, currentValue, index, array) {
console.log("index:"+index + ", previousValue:" + previousValue +", currentValue:"+currentValue +", array:" + array);
return currentValue;
});
/* 초기값(initialValue)이 없을 때의 Array.prototype.reduce의 파라미터 값 확인 */
array.reduce(function(previousValue, currentValue, index) {
console.log("index:"+index + ", previousValue:" + previousValue +", currentValue:"+currentValue );
return currentValue;
}, undefined);
/* forEach 는 return 이 없다. */
array.forEach(function(element, index, array){
console.log(element + " :: " + index + " :: " + array);
});
/* 일반적인 for loop */
var sum = 0;
for(var i=0; i < array.length; i++) {
sum += array[i];
}
console.log(sum);
/* 초기값 (initialValue) 0을 준 경우 */
sum = 0;
sum = array.reduce(function(previousValue, currentValue, index) {
return sum += currentValue;
}, 0);
console.log(sum);
/* 초기값 (initialValue)을 주지 않은 경우 */
sum = 0;
sum = array.reduce(function(previousValue, currentValue, index) {
return sum += currentValue;
}, 0);
console.log(sum);참고자료
Understand Javascript Array Reduce in 1 Minute https://www.airpair.com/javascript/javascript-array-reduce#javascript-reducing-vs-looping Mozilla Docs for Array.prototype.reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Facebook >> 생활코딩 https://www.facebook.com/groups/codingeverybody/permalink/1058801940827008/ |
'HTML + JAVASCRIPT + CSS' 카테고리의 다른 글
| D3] TEXT 태그를 wraping하여 라벨 나누기 (0) | 2018.08.17 |
|---|---|
| [JAVASCRIPT] - 주소창의 parameter 제거 (0) | 2017.03.09 |
| Array.prototype.reduce VS for loop (0) | 2015.09.22 |
| [jsGantt]간트 차트 라이브러리 (0) | 2014.09.03 |
| requirejs 란 - 모듈정의, 모듈 로더 (0) | 2014.08.29 |
| [jQCloud] 간단하게 사용하는 TAG CLOUD (0) | 2014.08.18 |
