자바스크립트 Array reduce 구현하기

Posted on | In
자바스크립트 prototype을 이용하여 배열 reduce 기능구현하기

reduce란

js의 Array에서 map과 foreach 와 같이 자주 쓰이는 함수 중 하나인 reduce메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

ex)

1
2
3
4
5
6
7
8
9
10
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

reduce 구현해보기

reduce 함수에서 콜백 함수는 accumulator, currentValue, currentIndex, array 이렇게 4가지의 인자를 받는다. 그리고 주의할 점은 reduce함수에 initialValue를 제공한 경우에는 accumulator의 초기값이 initialValue가 되서 reduce는 배열 첫 인덱스부터 순회하지만, initialValue가 제공되지 않으면, reduce는 인덱스 0을 건너뛰고 인덱스 1부터 순회하고 accumulator는 배열 첫 번째 값과 같다.

이러한 점을 주의해서 initialValue의 유무에 따라 다르게 작동하는 함수를 작성하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

Array.prototype.myReduce = function (callback, initialValue) {
  let i = 0;
  let accumulator;
  initialValue ? (accumulator = initialValue) : ([i, accumulator] = [1, this[0]]);
  for (; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
};

console.log(array1.myReduce(reducer)); // 10
console.log(array1.myReduce(reducer, 5)); // 15

참고자료 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce