Array.prototype.reduce VS for loop

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 : 초기값 위에서는 '' 으로 되어 있음. 

Array.prototype.reduce Sample

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
[jsGantt]간트 차트 라이브러리  (0)	2014.09.03
requirejs 란 - 모듈정의, 모듈 로더  (0)	2014.08.29
[jQCloud] 간단하게 사용하는 TAG CLOUD  (0)	2014.08.18