reduce를 사용해보자

사용을 잘 안하게 되는 reduce

이상하게 reduce는 잘 사용을 안하게 되는 method중에 하나였다 !
하지만 일을 하다보니 reduce를 써야하는 상황에 닥치게 되었고,
reduce를 다시 공부해 보기로 마음 먹었다.!

Array.prototype.reduce()

• reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. (출처 mdn)

배열의 각 요소에 대해 주어진 리듀서 함수를 실행시켜 하나의 결과값을 반환하는 메소드로 사용되는 reduce

const array1 = [ 1,2,3,4 ];
// 0 + 1 + 2 + 3 + 4 

const initialValue = 0 ;
const sum = array1.reduce((previousValue, currentValue) => 
	previoustValue + currentValue , initialValue);
    
console.log(sum) 
// sum = 10

리듀서 함수는 4개의 인자값을 가진다
1. 누산기 (acc)
2. 현재값 (cur)
3. 현재 인덱스 (idx)
4. 원본배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

사실 무슨말인지 잘 이해가 안됐다!! 그래서 예시문으로 이해해보기로!

같은 val 값끼리 묶기

const array1 = [
	{
      key: 301001 ,
      val: '사과'
	},	
    {
      key: 301002 ,
      val: '바나나'
     },
    {
      key: 301003 ,
      val: '참외'
	},
  	{
      key: 302001 ,
      val: '사과'
	},
   	{
      key: 302002 ,
      val: '바나나'
	},
   	{
      key: 302003 ,
      val: '참외'
	}	
]

const reduceObj = array1.reduce((acc,obj) => {
	const {val} = obj;
  if(!acc[val]) {
  	acc[val] = [];
  }
  acc[val].push(obj.key);
  return acc;
},{})

이경우 이렇게 출력이 된다 . 같은 val 안에 key값을 묶는 객체를 위해서는 한번더 reduce를 해줘야한다.

{
  바나나: [301002, 302002],
  사과: [301001, 302001],
  참외: [301003, 302003]
}

한번더 reduce를 해보자

const objEntires = Object.entries(reduceObj)

// 출력값 [["사과", [301001, 302001]], ["바나나", [301002, 302002]], ["참외", [301003, 302003]]]

/* 
Object.entries({ key: value , key:value}) 

[["key","value"],["key","value"]] 로 출력 
*/


const result = objEntires.reduce((arr,[val,key]) => {
arr.push({
      val: val,
      key: key,
	});
  return arr;
},[]);

/* 
출력값
[{
  key: [301001, 302001],
  val: "사과"
}, {
  key: [301002, 302002],
  val: "바나나"
}, {
  key: [301003, 302003],
  val: "참외"
}]
*/

reducer를 이용해서 같은 val인 것들끼리 모았다. 작업하면서 필요한 부분이라 reducer를 사용할수밖에 없었는데 예시를 통해 이해를 할 수 있었다.
reducer를 좀더 다양하게 활용하면 좋을것 같다 .