TIL 23.01.17

오늘은 underbar 과제를 통해서,

기존에 존재하는 메서드들을 직접 구현해보는 시간을 가졌다.

 

과제는 처음에 만든 함수를 뒤에서도 활용을 하면서 구현하는 식으로 진행이 되었고,

맨 마지막에, 가장 애를 먹었던 _.reduce 함수를 구현하는데 겪었던 어려움을 써보고자 한다.

 

기존 reduce 메소드

// reduce
const numbers = [1, 2, 3, 4];

numbers.reduce((누산값, 현재요소값) => {
  return 다음누산값;
}, 초기누산값);

reduce는 배열의 각 요소를 순회하며,

callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다.

 

초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값으로 설정되고,

두번째 요소부터 순회를 한다.

 

 

_.reduce 함수

._reduce함수를 구현하려면 기존의 작성한 ._each함수를 사용해야 했다.

 ._each함수를 설명하자면 , 배열이나 객체를  콜백함수를 받아 순회하는 함수라고 생각하면 된다.

// _.each는 명시적으로 어떤 값을 리턴하지 않습니다.
_.each = function (collection, iteratee) {
  // TODO: 여기에 코드를 작성합니다.
  let idx = 0;
  if (Array.isArray(collection)) {
    for (let i of collection) {
      iteratee(i, idx, collection);
      idx++;
    }
  } else {
    //Object.keys()는 배열이므로 for of 사용
    for (let i of Object.keys(collection)) {
      iteratee(collection[i], i, collection);
    }
  }
};

 

 

구현을 진행하면서 _.reduce의 iteratee 콜백함수에는,

iteratee(acc, ele, idx, arr) 처럼 4가지 인자를 iteratee에 전달 해야해서 당황했다.

기존의 _.each 함수의 iteratee는 3가지 인수만 받았기 때문에, 인자의 개수가 달라서 어떻게 하지? 생각이 들었다.

_.reduce = function (arr, iteratee, initVal) {
  // TODO: 여기에 코드를 작성합니다.


  return acc;
};

 

여러 고민을 하다, .each함수의 들어갈 새로운 콜백함수를 만들고, 그 안에 4가지 인자를 전달받는 

iteratee 콜백함수를 넣어주기로 했다.

_.reduce = function (arr, iteratee, initVal) {
  // TODO: 여기에 코드를 작성합니다.

  let acc = initVal;

//새로운 콜백함수를 function으로 생성
//새로운 콜백함수 내부에 iteratee 실행
  _.each(arr, function (i, idx, collection) {
    if (acc === undefined) {
      acc = arr[0];
    } else {
      acc = iteratee(acc, i, idx, collection);
    }
  });

  return acc;
};

해당 코드로 구현을 하니 잘 작동을 하였다.

 

함수를 따로, 따로 사용할 때는 중첩이 없어서, 직관적으로 사용할 수 있었던 것에 반해서,

함수를 이렇게 중첩적으로 사용할 때는, 어떤 함수를 사용할지 부터 어떤 인자를 받아와야하는지가 

너무나도 헷갈렸다.

 

기존에 사용해보지 않은 방식이라, 너무 헷갈렸지만

기존에 구현된 메서드에 감사하게 되는 시간이었다.

 

-끝-