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/



Posted by jabsiri