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 |
댓글을 달아 주세요