ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • TIL : underscore.js _.reduce method 만들기(javascript)
    캡틴 코딩일기/javascript 2020. 3. 7. 17:44
    728x90
    반응형

    TIL : underscore.js  _.reduce method 만들기(javascript)

     

    ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **

    이번엔 underscore.js 의 _.reduce / picture by 캡틴

     

    지난 _.uniq 메소드에 이어서, _.reduce 메소드 구현에 대해 정리해본다.

     

    먼저, 배열 메소드로서의 reduce 에 대한 개념(동작원리, 매개변수)에 대해 정리해보았다.

    array.reduce(function(accumulator, currentValue, currentIndex, array){
      return do something
      }, []); // 여기 입력된 빈 배열이 초기값(initialValue)

     

    ⭐️매개변수

    • accumulator (누산기) :  callback 함수의 반환값을 누적하며 저장하는 변수. 
    • currentValue : reduce의 callback 함수가 배열의 요소를 순환하며 처리하는 현재 값. (생략 가능)
    • currentIndex : 초기값을 지정하는 경우에는 0, 지정하지 않는 경우에는 1부터 시작된다. (생략 가능)
                             (초기값 미지정시, accumulator가 array[0]으로 설정되기 때문에.)
    • array : reduce 메소드를 적용하는 배열. (생략 가능)
    • initialValue : 누산기에 처음부터 입력할 초기값. initialValue를 지정하지 않으면, 자동으로 0번째 index의 요소를
                           초기값으로 설정하게 된다.

    reduce 메소드의 출력값은 accumulator에 누적되는 하나의 값으로 정리된다.

    배열 안의 요소들을 순차적으로 더하거나 빼고, 곱하거나 나누는 사칙연산용으로서의 용도를

    기초로 학습했던 기억이 있다. 


    이제, reduce 메소드를 underbar.js( _.reduce)로 구현해보자.

    underscore.js 의 library에 정의된 _.reduce는 아래와 같다.

     

    _.reduce(list, iteratee, [memo], [context])

    - list : collection으로서, 배열 또는 객체가 들어올 수 있다.

    - iteratee : list의 요소를 순환하며 처리하는 함수.

    - memo : iteratee 함수의 인자로 사용될 초기값. (생략 가능)

    - context : iteratee 함수에서 this로 바인딩 되는 인자.

                         (bind, binding은 다른 포스트에 개념을 정리해보자. 꼭..!)


    _.reduce 에는 아래의 세 가지 인자(argument)가 주어진다.

     

    • collection : _.reduce 메소드를 통해 처리되는 list
    • iterator : collection 의 각 요소를 처음부터 끝가지 순환하며 처리하는 함수 (iteratee).
    • accumulator : iterator에 의해 처리된 값이 누적되는 장소. (memo)
                             accumulator에 초기값을 지정 / 미지정 하는것이 가능하다.

    구현하여야 하는 기능은 아래와 같다.

    • collection 안의 요소를 하나씩 순서대로 순환하며 처리.
    • 순차적으로 대입되는 요소는 iterator를 통과하며, 그 결과값이 accumulator에 누적.
    • accumulator에 초기값을 지정하여 두었다면, iterator를 통해 처리되는 첫 번째 요소는
      collection의 0번째 인덱스값으로 지정한다.
    • 반대로 초기값이 지정되지 않는 경우, accumulator = collection[0]이 된다.
    • _.reduce는 한 개의 값을 마지막으로 출력한다.(return 필요)
    _.reduce = function (collection, iterator, accumulator){
      if (accumulator === undefined){  // accumulator에 초기값이 지정되지 않는 경우
        accumulator = collection[0];   // 초기값은 collection의 0번째 인덱스값으로 한다.
      for (let i=1; i<collection.length, i++){      // collection[0]은 이미 초기값으로 활용되었으니, 
        accumulator = iterator(accumulator, collection[i]); // for문은 i를 1부터 시작하도록 설정.
      }else{
        for (let j=0; j<collection.length; j++){     // accumulator에 초기값이 지정되는 경우의 for문.
          accumulator = iterator(accumulator, collection[j]); 
       }
      }
      return accumulator;  // 결과물로서 accumulator에 누적된 값을 출력
    });

     

    앞에서 학습한 _.each 메소드를 활용한 풀이는,  ... 나중에 업데이트 해야지.

     

    ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **

    728x90
    반응형

    댓글

Designed by Tistory.