(underscore.js)_.reduce()

호두파파·2021년 2월 20일
0

underScore.js

목록 보기
3/9

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()

underscore.js 라이브러리에 정의된 _.reduce는 아래와 같다.

reduce _.reduce(list, iteratee, [memo], [context])
  • list: colletion으로서, 배열이나 객체가 될 수 있다.
  • iteratee: list의 각 element(value)를 반복적으로 돌리는 함수이다.
  • [memo]: iteratee 함수의 인자로 사용될 초기 값을 말한다.(생략가능)
  • [context]: iteratee 함수에서 this로 바인딩 되는 것이다.(생략가능)

list의 각 element(value)를 iteratee 함수를 돌려, 하나의 값으로 리턴한다.

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

  • list : collection으로서 배열 또는 객체가 들어올 수 있다.
  • iterator : collection의 각 요소를 처음부터 끝까지 순환하며 처리하는 함수(iteratee)
  • accumulator : iterator에 의해 처리될 값이 누적되는 장소. 지정 / 미지정하는 것이 가능하다.

예제

  • [memo]가 입력될 경우 : iteratee 함수의 첫 memo는 입력된 [memo]로 사용된다.
var sum = _.reduce([1, 2, 3], function(memo, num){
  return memo + num; 
}, 0);

console.log(sum); // 6

// [memo]가 0으로 입력되어, 첫 memo의 값은 0으로 계산되어 0 + 1 = 1 이 된다.
//그 다음 memo는 그 전의 iteratee 함수에서 리턴된 값으로 하기 때문에, 그 다음 계산은 1 + 2 = 3이 된다. 그 다음은 3 + 3 = 6이 된다.
  • [memo]가 생략될 경우 : iteratee 함수의 첫 memo는 배열의 첫 element로 사용되고, 첫 인자는 두번째 element부터 사용된다.
var sum = _.reduce([1, 2, 3, 4], function(memo, num) {
  return memo + num; });

console.log(sum); // 10

// [memo]가 생략되면, 첫 memo의 값은 배열의 첫 element로 사용되고, 첫 인자(num)은 두 번째 element로부터 입력되어 계산된다. 즉, 처음에 1 + 2 = 3이 되고, 그 다음 계산은 3 + 3 = 6, 그 다음은 6 + 4가 되어 최종 값은 10이 된다.

reduce 함수에서 iteratee 함수 사용 시에 list가 배열이냐, 객체이느냐에 따라 사용하는 인자가 다르다.

  • list가 배열일 경우, iteratee 함수의 인자로 (memo, element, index, list)를 사용한다.
  • list가 객체일 경우, iteratee 함수의 인자로 (memo, value, key, list)를 사용한다.

정리

  • _.each() 라이브러리는 함수의 인자로 collection, iterator, accumulator를 가져온다

    collection : list
    iterator : iteratee
    accumulator : [memo]

  • [memo]가 생략될 경우, accumulator가 falsy한 값인지 확인한다.
  • 생략될 경우, iteratee 함수의 첫 memo 값을 list의 첫번째 element로 사용해야 하기 때문에, accumulator를 collection[0]으로 지정한다.
  • for 문으로 list의 element를 하나씩 iterator 함수에 돌리는데, 인자를 list의 두번째 element부터 사용해야하기 때문에, collection[i+1]를 사용한다.
  • [memo]가 입력된 경우라면, for 문으로 list의 element를 하나씩 iterator 함수에 돌리고, 한 번 돌릴 때마다 값을 accumulator 값으로 설정한다.
  • 최종 accumulator 값을 리턴한다.
profile
안녕하세요 주니어 프론트엔드 개발자 양윤성입니다.

0개의 댓글