Javascript(자바스크립트) - 배열 처리 정리(4) - reduce

Javascript - reduce 설명

 

① reduce - 이 함수는 Array 객체의 ProtoType에 정의되어 있는 고차함수 이다.

② 가장 중요한 특징은 배열의 값을 한 개로 감소시키는 특징을 가지고 있다.

③ map, filter, find 함수로 구현할 수 있는 기능은 모두 reduce 함수로 구현 가능하다.

④ 두 번째 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정하여 유연하게 사용 가능 하다.

⑤ MDN : Array#Reduce 레퍼런스(Reference) 확인

 

 

Javascript - reduce 패턴(1)

기본 소스

   arr.reduce(callback[, initialValue])

     

     1.callback

•   previousValue : 마지막 콜백에서 반환된 값 또는 initialValue
•   currentValue   : 현재 배열 내 처리되고 있는 요소
•   currentIndex   : 현재 배열 내 처리되고 있는 요소의 인덱스
•   array              :  reduce 호출에 사용되는 원 배열

    2.initialValue : callback의 첫 번째 인수의 값에 사용되는 값(default)

//reduce : initialValue 없는 경우
//총 loop 횟수는 4회
var arr = [12, 4, 19, 33, 86];
var sum = arr.reduce( (pre, value, idx, arr) => {
    return pre + value;
});
 
console.log(sum);

실행 화면

 

Javascript - reduce 패턴(2)

기본 소스

//reduce : initialValue 있는 경우
//총 loop 횟수는 5회
var arr = [12, 4, 19, 33, 86];
var sum = arr.reduce( (pre, value, idx, arr) => {
    return pre + value;
}, 0);
 
console.log(sum);

실행 화면

 

Javascript - reduce 패턴(3)

기본 소스(응용)

var a= ["a","b","c","c","d","b","a","a","c","c","c"];
 
//중복되는 원소의 갯수를 계산하는 함수
//첫 배열 값은 {} 로 시작하는 것에 주목하자.
var b = a.reduce( (x, y, idx, arr) => {
  x[y] = ++x[y]|| 1;
  return x;
}, {});
 
console.log(b);

실행 화면

본문의 모든 예제는 ES6 (ECMAScript 2015) 문법으로 작성했다.