Reduce

reduce 메서드의 형태

arr.reduce(callback(accmulator, currentValue, index, array), initialValue)

arr

- 순회하고자 하는 배열

 

accumulator

- 누적되는 값

- callback 함수의 반환값을 누적

- initialValue를 설정한 경우 callback의 최초 호출시 initialValue로 값으로 초기화

 

currentValue

- 현재 배열의 요소

 

index(생략 가능)

- 현재 배열 요소의 index

- initialValue가 없을 경우 arr의 0번째 인덱스 값으로 초기화

 

array(생략 가능)

- reduce 함수를 호출한 배열

 

initialValue(생략 가능)

- callback의 최초 호출시 accumulator 초기값

- 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다

- 빈 배열에서 초기값 없이 reduce 함수를 호출하면 오류가 발생한다

 

 

reduce 작동 방식

let a = [0, 1, 2, 3, 4]

a.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

callbackaccumulatorcurrentValuecurrentIndexarray반환 값

callback	accmulator	currentValue	currentIndex	array	반환 값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

reduce() 가 반환하는 값으로는 마지막 콜백 호출의 반환값 (10)을 사용합니다.

완전한 함수 대신에 화살표 함수를 사용할 수도 있습니다. 아래 코드는 위의 코드와 같은 결과를 반환합니다.

let a = [0, 1, 2, 3, 4]
a.reduce( (prev, curr) => prev + curr );

 

reduce()의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다.

let a = [0, 1, 2, 3, 4]
a.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

callback	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20

이 때 reduce()가 결과로 반환하는 값은 20입니다.

 

예제

배열의 모든 값 합산

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

화살표 함수로 정의할 수 있습니다.

var total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
);

 

객체 배열에서의 값 합산

객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 반드시 초기값을 주어 각 항목이 여러분의 함수를 거치도록 해야 합니다.

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6

화살표 함수로 정의할 수 있습니다.

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

중첩 배열 펼치기

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue);
  },
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

화살표 함수로 정의할 수 있습니다.

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);

객체 내의 값 인스턴스 개수 세기

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

속성으로 객체 분류하기

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기

// friends - an array of objects
// where object field "books" - list of favorite books
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// allbooks - list which will contain all friends' books +
// additional list contained in initialValue
var allbooks = friends.reduce(function(accumulator, currentValue) {
  return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

배열의 중복 항목 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]