reduce

이번 글에서는 Javascript array method 에피소드의 마지막, reduce 에 대해 적어보려고 합니다. 앞선 글들에서 이미 forEach, map, 그리고 filter, reject, every, some 를 다루었지만, reduce 는 자바스크립트 배열 메서드 중 활용도가 으뜸입니다.

먼저 예시코드부터 볼까요?

var votes = ["kim", "hong", "lee", "hong", "lee", "lee", "hong"];

var reducer = function(accumulator, value, index, array) {
  if (accumulator.hasOwnProperty(value)) {
    accumulator[val] = accumulator[val] + 1;
  } else {
    accumulator[val] = 1;
  }
  return accumulator;
}

var initialValue = {};

var result = votes.reduce(reducer, initialValue);

console.log(result); // { kim: 1, hong: 3, lee: 3 }

상기 코드는 votes 배열에 있는 값들을 순회하면서 최종적으로 각각의 값들이 몇 번 나오는지 count 하는 로직입니다. reduce 메서드의 첫 번째 인자로는 reducer 라는 함수를, 두 번째 인자로는 초기값, intialValue 라는 빈 object 를 전달합니다.

배열의 첫 번째 순회 때는 accumulator 의 값은 initialValue, 즉 {} 입니다. if 조건검사의 결과는 false 이므로 accumulator.kim = 1 이 되고, { “kim” : 1 } 이라는 값을 return 합니다.

두 번째 순회 때는 accumulator 의 값은 앞에서 전달받은 { “kim” : 1 } 이고, value 는 배열의 두 번째 값(votes[1])인 “hong” 이므로 return 하는 값은 { “kim” : 1, “hong” : 1 } 입니다. 이렇게 계속해서 배열의 끝까지 순회하면 최종적인 결과는 { kim: 1, hong: 3, lee: 3} 와 같습니다.

---

기본적으로 reduce 메서드도 다른 메서드와 동일하게 첫 번째 인자로 함수를 받습니다. 하지만, 두 번째 인자로 초기값을 셋팅할 수 있다는 것에서 차이가 있습니다. 물론, 두 번째 인자는 생략이 가능하며, 생략 시에는 배열의 첫 번째 값이 그값을 담당합니다.

뿐만 아니라 배열을 순회하면서 return 한 값들을 accumulator, 즉 계속해서 전달받아서 사용할 수 있습니다. accumulator 를 어떻게 활용하냐에 따라 최종적인 return 값은 string, integer 가 될 수도, array 나 object 가 될 수도 있습니다.

---

이제부터는 reduce 를 활용해보면서 다른 메서드와의 차이점, 그리고 적재적소에 사용하는 다양한 방법, 감히“reduce 100% 활용법"에 대해 이야기해보겠습니다. 해당 내용은 자바스크립트 전문 사이트, egghead 의 강의(Reduce Data with Javascript Array#reduce)를 참고했습니다.

1. reduce vs. map

var data = [1, 2, 3];

var initialValue = [];
var reducer = function(accumulator, value) {
  accumulator.push(value * 2);
  return accumulator;
};
var result = data.reduce(reducer, initialValue);
console.log(result); // [2, 4, 6]

var result2 = data.map(x => x * 2);
console.log(result2); // [2, 4, 6]

두 메서드 모두 같은 결과, 즉 원래 배열의 값들이 2배씩 커진 배열을 return 하게 됩니다. 하지만 map 이 훨씬 짧고 직관적이죠?

---

2. reduce vs. filter

var data = [1, 2, 3, 4, 5, 6];

var initialValue = [];
var reducer = function(accumulator, value) {
  if (value % 2 != 0) {
    accumulator.push(value);
  }
  return accumulator;
};
var result1 = data.reduce(reducer, initialValue);
console.log(result1); // [1, 3, 5]

var result2 = data.filter(x => x % 2 != 0);
console.log(result2); // [1, 3, 5]

두 메서드 역시 모두 같은 결과(원래 배열의 값들 중에서 2로 나눈 나머지가 0이 아닌 값들이 모인 배열)를 주지만 역시 filter 가 더 직관적으로 보입니다.

하지만, 1번과 2번의 상황을 동시에 작업해야하면 어떨까요? 다시 말해서, 원래 배열의 값들 중에서 2로 나눈 나머지가 0이 아닌 값들을 골라서 2배씩한 배열을 return 하고자 한다면 말이죠.

---

3. reduce vs. filter+map

var data = [1, 2, 3, 4, 5, 6];

var initialValue = [];
var reducer = function(accumulator, value) {
  if (value % 2 != 0) {
    accumulator.push(value * 2);
  }
  return accumulator;
}
var result1 = data.reduce(reducer, initialValue);
console.log(result1); // [2, 6, 10]

var result2 = data.filter(x => x % 2 != 0).map(x => x * 2);
console.log(result2); // [2, 6, 10]

네, reduce 는 배열을 1번만 순회하면 되지만 filter/map 조합은 두 번 순회해야하는 군요. 데이터 크기, 종류에 맞는 고려 및 결정이 필요해보입니다. filter/map 이 개인적으로 훨씬 더 직관적인 것으로 보이지만, reducer 라는 함수로 로직이 따로 빠져있는 reduce 가 더 재사용성이 있어 보입니다.

---

4. getMean(평균 구하기)

var data = [1, 2, 3, 4, 5, 6, 1];
var reducer = (accumulator, value, index, array) => {
  var sumOfAccAndVal = accumulator + value;
  if (index === array.length - 1) {
    return (sumOfAccAndVal) / array.length;
  }
  return sumOfAccAndVal;
};

var getMean = data.reduce(reducer, 0);
console.log(getMean); // 3.142857142857143

상기 코드는 배열을 순회하면서 accumulator 와 value 를 더해서 sum 을 만들고, 끝에 가서 배열의 크기로 나누는 로직입니다. 이때 초기값(initial value)을 0으로 셋팅했는데, 적지 않아도 됩니다. 그러면, 첫 번째 인자인 1(data[0]) 가 accumulator 로 넘어갑니다.

---

5. initial value 주의하기

const data = ["vote1", "vote2", "vote1", "vote2", "vote2"];
const reducer = (accumulator, value, index, array) => {
  if (accumulator[value]) {
    accumulator[value] = accumulator[value] + 1;
  } else {
    accumulator[value] = 1;
  }
  return accumulator;
};

const getVote = data.reduce(reducer, {}); // { vote1: 2, vote2: 3 } 
const getVote2 = data.reduce(reducer); // "vote1"

이 글이 시작할 때 처음에 보여주었던 예시(vote 배열 안의 값들의 개수를 세는 로직)와 같은 로직입니다만, initial value 가 있고 없음에 따라 큰 차이가 나는 getVote, getVote2 를 비교한 코드입니다.

getVote2 는 왜 예상과 다른 결과(“vote1”)가 나왔을까요? 그 이유는 reduce 메서드의 두 번째 인자로 아무 값도 전달이 되지 않았기 때문입니다.

배열의 첫 번째 값, “vote1” 이 첫 번째 순회의 accumulator 로 전달되었고, 조건문의 조건이 “vote1”[“vote2”] 이 되면서 결과는 undefined(false) 가 되어 “vote1”[“vote”] = 1; 이라는 의미없는 로직을 한 번 타고, 결론적으로 다음 accumulator 로 또 “vote1” 이라는 string 을 넘기게 된 것입니다. 따라서 최종적으로도 “vote1” 을 return 하게 되는 것입니다.

---

6. flatten (배열 납작하게 만들기)

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatArrayReducer = (accumulator, value, index, array) => {
  return accumulator.concat(value);
};

const flattenedData = data.reduce(flatArrayReducer, []); 
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

깊이(depth)가 있는 배열들을 flatten 할 때 배열을 순회하면서 concat (이어 붙이는) 로직을 reduce 를 활용해서 구현할 수 있습니다.

---

7. flattenMap

const input = [
  {
    "title": "슈퍼맨",
    "year": "2005",
    "cast": ["장동건", "권상우", "이동욱", "차승원"]
  },
  {
    "title": "스타워즈",
    "year": "2013",
    "cast": ["차승원", "신해균", "장동건", "김수현"]
  },
  {
    "title": "고질라",
    "year": "1997",
    "cast": []
  }
];
const flatMapReducer = (accumulator, value, index, array) => {
  const key = "cast";
  if (value.hasOwnProperty(key) && Array.isArray(value[key])) {
    value[key].forEach(val => {
      if (accumulator.indexOf(val) === -1) {
        accumulator.push(val);
      }
    });
  }
  return accumulator;
};

const flattenCastArray = input.reduce(flatMapReducer, []);
// ['장동건', '권상우', '이동욱', '차승원', '신해균', '김수현']

배열을 순회하면서 배열의 값으로 들어있는 object 의 key 존재여부를 확인하고, unique 한 “cast 를 key 로 갖는 배열의 값들”을 최종적으로 return 하는 로직을 구현할 수 있습니다.

---

8. reduceRight

const data = [1, 2, 3, 4, "5"];
const sumData1 = data.reduce((accumulator, value) => {
  return accumulator + value;
}, 0);
const sumData2 = data.reduceRight((accumulator, value) => {
  return accumulator + value;
}, 0);
console.log(sumData1); // "105"
console.log(sumData2); // "054321"

string 과 number 의 합은 string 임을 고려한다면 배열의 끝(오른쪽)부터 순회를 시작하는 reduceRight 의 값, 즉 sumData2 가 왜 “054321” 이 나왔는지 알 수 있습니다.

0 과 “5” 가 첫 순회 때 + 되면서 “05” 가 되고, 계속해서 string 이 더해진 것입니다. 반면, sumData1 은 0 부터 4까지 더해짐으로써 10이 되었고 마지막에 “5” 와 합하게 되면서 “105” 가 return 된 것이고요.

---

9. reduce 를 활용한 함수형 프로그래밍

const increment = (input) => { return input + 1; };
const decrement = (input) => { return input - 1; };
const double = (input) => { return input * 2; };
const halve = (input) => { return input / 2 };

// 1. 일반적일 수 있는 로직
const initial_value = 1;
const incremented_value = increment(initial_value);
const doubled_value = double(incremented_value);
const final_value = decrement(doubled_value);
console.log(final_value); // 3

// 2. reduce 를 활용한 함수형 프로그래밍
const pipeline = [
  increment,
  double,
  decrement,
  decrement,
  decrement,
  halve,
  double,
];
const final_value2 = pipeline.reduce((accumulator, func) => {
  return func(accumulator);
}, initial_value);
console.log(final_value2); // 1

reduce 의 메서드가 함수들의 이름이 적힌 배열에 대해 사용된다면, 상기코드와 같이 흥미로운 함수형 프로그래밍이 가능합니다. reduce 를 reduceRight 로 바꿔도 재미있는 결과가^^ 나오지요ㅎㅎㅎ

---

이것으로 reduce 를 활용한 9가지 패턴을 확인해보았습니다. 단순히 배열을 순회하면서 연산을 하는 것부터, 함수형 프로그래밍까지 모두 할 수 있습니다. 현업에서 개발을 할 때에도 이러한 점들을 유념하면서 코딩을 하면, 좀 더 직관적이고 짧은 길이의 코딩을 할 수 있을 것 같습니다!

출처:https://medium.com/@hongkevin/js-3-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%84%9C%EB%93%9C-reduce-100-%ED%99%9C%EC%9A%A9%EB%B2%95-feat-egghead-io-97c679857ece