JS Array.prototype.reduce 함수로 구현해보기

js의 Array.prototype.reduce 라는 메소드가 있다. 그 함수를 혼자 함수로 구현해보기로 하였다.

array의 메소드가 아닌 reduce라는 함수로 만들어서 결과를 return 해주도록 하였다.
파라미터는 arr, 실행할 함수, 초기값 순서대로 하였다.
초기값이 있다면 i를 첫번째부터 시작할 것이고, 초기값을 넣어주지 않는다면, 초기값을 첫번째 원소로 하고 첫 번째 원소는 지나간걸로 된다.

그리고 arr.length 만큼 파라미터로 받은 함수를 실행한 값을 result에 다시 담아준다.
함수는 reduce의 콜백함수와 같이, 누적값, 현재값, index, array 순서대로 넣어주었다.

그리고 마지막 result 값을 반환한다.

function reduce(arr, func, start) {
  let i = start ? 0 : 1;
  let result = start || arr[0];

  for (; i < arr.length; i++) {
    result = func(result, arr[i], i, arr);
  }
  return result;
}

다음 코드를 실행해보았을 때 다음과 같이 값이 똑같이 나온 것을 볼 수 있었다.

const a = [1, 2, 3, 4, 5];

console.log(reduce(a, (acc, cur) => acc + cur, 10));

console.log(a.reduce((acc, cur) => acc + cur, 10));

오브젝트를 넣었을 때도 제대로 될까?

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const func = (allNames, name) => {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
};
console.log(reduce(names, func, {}));

console.log(names.reduce(func, {}));

같은 함수를 넣었을 때 다음과 같이 똑같은 결과를 만드는 것을 볼 수 있다.

오늘은 완벽하진 않겠지만, reduce 함수를 만들어보았다.