JS-20 reduce() (22/12/11)

1. Array.prototype.reduce()

reduce 메서드는 기본적으로는 `forEach, map, filter등과 같이
배열의 각 요소들을 모두 순회할 때까지 콜백함수를 반복실행하는 메서드입니다.

배열 메서드중 가장 강력한 기능을 가진 대신 사용법도 까다롭기 때문에
reduce 메서드의 사용법을 익히려면 먼저 다른 배열 메서드들을
온전히 이해할 필요가 있습니다

reduce 메서드 문법

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

reduce 메서드에는 다음과 같은 특징들이 있습니다

• 첫 번째 인자(필수)로 reducer함수(콜백)를,
  두 번째 인자(선택적)로는 initialValue를 받습니다
  그외의 추가 인자(Value, index, array)e들은 다른 배열 메서드와 같습니다

• initialValue를 따로 지정할 경우 accumulator는 initialValue,
  currentValue는 배열의 첫 번째요소부터 시작합니다
  만약 initialValue가 없다면 accumulator는 배열의 첫 번째 요소,
  currentValue는 배열의 두 번째 요소부터 시작합니다

• initialValue에 어떤 값을 주느냐에 따라 어떠한 데이터 타입으로도
  반환할 수 있습니다. 이는 reduce 메서드의 가장 큰 특징이기도 합니다
  (특히 객체 타입으로 변환하기 위해 사용하는 경우가 많습니다)

예제1. 배열 요소들의 총합을 구하기 위해 사용하는 경우입니다

const arr = [1, 2, 3, 4, 5]

const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 0)

console.log(sum) // > 15

// 이전(초기)값 + 현재값
// 0 + 1
// 1 + 2
// 3 + 3
// 6 + 4
// 10 + 5

예제2. 배열 데이터를 객체 타입으로 변환하기 위해 사용하는 경우입니다

const arr = ['Host:localhost', 'Connection:keep-alive','Content-Type:application/json']

const reduce = arr.reduce((accumulator, currentValue) => {
  const [key, value] = currentValue.split(":")
  // 구조 분해 할당 ~ key에 Host, value에 localhost가 대입됩니다
  // Host:localhost > [Host, localhost]
  
  accumulator[key] = value
  // 하이픈(-)이 있어 점표기법을 쓸 수 없기 때문에 대괄호 표기법을 이용합니다
  
  return accumulator
  // accumulator를 리턴해야만 객체 안에 currentValue가 담기게 됩니다 
}, {})
// 객체로 리턴하려면 initialValue가 빈 객체여야 합니다

console.log(reduce)

// >
// {
//   Host: 'localhost',
//   Connection: 'keep-alive',
//   'Content-Type': 'application/json'
// }


// 이전(초기)값 {}
// 현재값 [Host, localhost]
// 리턴(함수 실행 결과) {host : 'localhost'}

// >

// 이전값 {host : localhost}
// 현재값 [Connection, keep-alive]
// 리턴 {Connection : 'keep-alive'}

// > ...

예제3. 예제2의 코드를 map 메서드와 함께 사용했을 때의 결과입니다

const arr = ['Host:localhost', 'Connection:keep-alive','Content-Type:application/json']

const result = arr.map(v => v.split(":")).reduce((acc,value) => {
        const [key, val] = value
        acc[key]=val
        return acc
},{})


// 원본 배열에 map 메서드를 사용한 출력결과
// [
//   [ 'Host', 'localhost' ],
//   [ 'Connection', 'keep-alive' ],
//   [ 'Content-Type', 'application/json' ]
// ]


// map, reduce 메서드를 함께 사용했을 때
// > 
// {
//   Host: 'localhost',
//   Connection: 'keep-alive',
//   'Content-Type': 'application/json'
// }