# reduce란?

javscript를 사용하고 또 리액트를 사용하면서, 평소에도 중요하다 생각했지만 실제로 프로젝트를 진행해보니까 다시한번 중요하다 생각이든 메소드에 대해 정리를 해보려고 한다.

오늘은 그 중에 reduce에 대해 정리해보려고 한다.

먼저 reduce를 정리하며 알아낸 정보들은 다음 아래와 같다.

1. reduce는 Array 객체 ProtoType에 정의되어 있는 고차 함수이다.
2. reduce는 배열의 값을 한개로 감소 시키는 특징을 가지고 있다.
3. map,filter,find 함수로 구현할 수 있는 기능들은 모두 reduce 함수로 구현 가능하다.
4. 두번째 매개변수인 initialValue를 통해 반환 값을 자유롭게 지정하여 유연하게 사용 가능하다.

즉 정리하자면, reduce는 배열의 각 요소에 대해 callback을 실행하며 단 1개의 출력 결과를 만든다.

배열 원소를 입력으로하여 1개의 수치 또는 문자열,배열,객체를 만든다. 그래서 "줄이다"의 의미인 reduce라는 이름을 얻었다.

reduce는 다재다능하다.

배열 원소들의 전체 합을 구하거나 최대값을 구할 수 있고, 배열을 펼치거나 원소들의 개수를 셀 수 있다.

이 메소드의 문법은 아래와 같다.

array.reduce(callback(accumulator, currentValue[, index[, array]] )[, initialValue])

1) 배열 원소들의 합 구하기

1-1)숫자 리스트의 전체 합을 구한다. 초기값은 합을 구하므로 0에서 부터 시작한다.

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

const total=num.reduce((acc,cur)=> acc+cur,0)

console.log(total)// 15

1-2)객체의 quntity(수량)의 전체 합을 구한다.

const obj =[{quntity: 1},{quntity: 2},{quntity: 3}]

const total =obj.reduce((acc,cur)=> acc+cur.quntity,0)

console.log(total) // 6

1-3)객체의 quntity(수량)의 따른 가격의 전체 합을 구한다.

const order =[
  {price:1000,amount:4},
  {price:2000,amount:3},
  {price:3000,amount:2},
  {price:4000,amount:1},
]

const total = order.reduce((acc,cur)=> acc+(cur.price)*(cur.amount),0)

console.log(total)//20000

2) 배열안에 배열이 있는 원소들을 펼치기

배열안에 배열이 있는 경우 순회하면서 concat으로 붙여서 펼쳐진 배열을 구할수 있다.

const flattened = [[0,1],[2,3],[4,5]]

const result = flattened.reduce((acc,cur)=> acc.concat(cur),[])

console.log(result)//[0,1,2,3,4,5]

3)배열을 객체({})로 변환하기

초기값은 빈 객체({})로 지정하고 return 결과가 다시 입력으로 사용될 수 있도록 한다.

const names =['sewon','yejin']

const result=names.reduce((acc,cur)=>{ 
 	 	acc[cur]=cur   
  		return acc
    },
 {})

console.log(result) //{ sewon: 'sewon', yejin: 'yejin' }

3-1) 배열 원소들의 출현 개수를 세고 객체({})형태로 구한다.

const countedNames =['A','B','B','B','A','C']

const result = countedNames.reduce((acc,cur)=>{
  if(cur in acc){
  acc[cur]++    
  } else{
    acc[cur]=1
  }
  return acc
},{})

console.log(result)// {A: 3, B: 2, C:1}

3-2) 개체에서 값의 인스턴스 계산

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

const result = names.reduce((acc,cur)=>{
  if(cur in acc){
    acc[cur]++
  }else{
    acc[cur]=1
  }
  return acc
  
},{})
console.log(result)// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

4)객체 (key:value)에서 값이 비어있는 경우 필터링

이름,나이,주소가 저장된 객체 값이 비어있는 경우 해당 엘리먼트를 필터링한다.

const params={name:'sewon', age:'', address:"seoul"}

const filteredParams = Object.keys(params).reduce((filter,key)=>{
console.log(params[key]) //'sewon','','seoul'
  if(params[key] !==''){
    filter[key] = params[key]
  } return filter
},{})

console.log(filteredParams) //{ name: 'sewon', address: 'seoul' }

또는 Object.entries, filter, reduce 사용하는 방법

(Object.entries( )는 for...in와 같은 순서로 [key, value] 쌍의 배열을 반환한다.)

const params={name:'sewon', age:'', address:"seoul"}
const filteredParams=Object.entries(params).filter(([key,value]) => value !=='').reduce((result,[key,value])=>({...result,[key]:value}),{})
console.log(filteredParams) //{ name: 'sewon', address: 'seoul' }

심화문제🔥) 속성별로 개체 그룹화

1) FM정답 해설

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 33 },
  { name: 'Jane', age: 26 },
	{ name: 'Steve', age: 33 },
	{ name: 'Joseph', age: 80 }
];

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

const groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// { 
//   21: [
//     { name: 'Alice', age: 21 }, 
//   ], 
//   33: [{ name: 'Bob', age: 33 },
//     { name: 'Steve', age: 33 },
//   ] 
// ...
// }

배열 내 객체는 이름과 나이 속성을 갖는다. 특정 속성으로 그룹 짓고자 할 때 쓰는 함수를 만드는 문제에서 reduce 메소드를 썼다. 역시 초기값으로 빈 객체를 할당해준 뒤 key 유무에 따라 배열 내 요소(객체)를 최신 결과값 객체에 추가한다.

2) 작성자가 풀어본 해설

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 33 },
  { name: 'Jane', age: 26 },
  { name: 'Steve', age: 33 },
  { name: 'Joseph', age: 80 }
];


const groupedPeople = people.reduce((acc,property)=>{
  const key = property.age // 21,33,26,33,80
  if(!acc[key]){
    acc[key]=[]
  }  acc[key].push(property)
  
  return acc
},{})

console.log(groupedPeople)

//{
//  '21': [ { name: 'Alice', age: 21 } ],
//  '26': [ { name: 'Jane', age: 26 } ],
//  '33': [ { name: 'Bob', age: 33 }, { name: 'Steve', age: 33 } ],
//  '80': [ { name: 'Joseph', age: 80 } ]
//}