reduce 다양하게 활용하기

Jung Hyun Kim·2021년 2월 23일
0

reduce?

firebase에서 객체를 가져와서 redux store의 객체랑 비교해서 다르면 dispatchg해주는 함수를 JSON.stringify를 통해 객체비교로 가져왔다. 그런데 객체는 순서가 보장이 안되다보니 getFirebase할때마다 랜덤한 순서로 key value가 들어오다보니 제대로 비교하기가 힘들었다!!!!!!!! 그래서 생각해낸것이 배열로 바꾸고 sort한 다음 다시 객체에 넣어주는것! 객체 순서를 보장하기위해 아래와 같이 사용하였다.

        const sortedCupDispenserStatus = cupDispenserStatus.map((cupDispenser) =>
          Object.keys(cupDispenser)
            .sort()
            .reduce((obj, key) => ((obj[key] = cupDispenser[key]), obj), {}),
        );
        

reduce 를 평소에 총합 구할때만 쓰다본 저런 표현이 좀 어색해서 구글링해서 사용한 코드지만 대충 아 이렇게쓰겠구나 였는데(저렇게 콤마로 리턴값을 안해줬는데 저런방법이 있구나..까지만 이해했다.) 이참에 reduce를 제대로 정식으로 정리를 해보려고 한다.

기본 적인 구조는 두개의 argument (acc,와 current value)를 받는콜백 함수(index,array 는 옵션이다)가 있고, initial value를 넣어준다면 콤마 뒤에 넣어으로서 acc 에 넣어줄 첫 시작값을 정해주는 것이다.


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

reduce의 다양한 이용

물론 각 특징에 맞는 다른 method들도 많다.. map,filter,sort, etc.. reduce를 다양하게 활용하면서 익숙해보는게 목표니깐.. ㅎㅎㅎ sum구하기 말고 다른데에도 이용해보려고 한다

배열의 길이를 reduce로 구한다면?

아래와 같이 initial value를 0으로 셋팅하면 array를 돌면서 순차적으로 1 을 더해주면서 3을 리턴 할 것이다.

const array = ["a","b","c"]
array.reduce((acc,cur)=>{ acc +1 },0)

배열내의 합(예:가격의 합)을 구한다면?

const drinks = [
  {menu : 'americano', price:1800},
  {menu : 'cafeLatte', price: 2200},
  {menu : 'mintTea', price : 1900}]

// 합을 구해줄때는 웬만하면 initialValue를 0으로 셋팅 해주자! 
drinks.reduce((acc,cur)=> acc+ cur.price , 0})
// 결과 5900

map 처럼 써보기

drinks.reduce((acc,cur) => [...acc, cur.menu], [])
// 결과 ['americano','cafeLatte','mintTea']             

find를 더 id값을 key값으로 빼서 dictionary 처럼 사용해보기

스터디에서 물어보기

const drinks = [
  {id : '1', menu : 'americano', price:1800},
  {id : '2', menu : 'cafeLatte', price: 2200},
  {id : '3', menu : 'mintTea', price : 1900}]



const drinks = [
  {id : 1, menu : 'americano', price:1800},
  {id : 2, menu : 'cafeLatte', price: 2200},
  {id : 3, menu : 'mintTea', price : 1900}]

drinks.length

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

3
{
  '0': { id: 1, menu: 'americano', price: 1800 },
  '1': { id: 2, menu: 'cafeLatte', price: 2200 },
  '2': { id: 3, menu: 'mintTea', price: 1900 },
  '3': { id: 3, menu: 'mintTea', price: 1900 }
}

제일 비싼 메뉴 찾기

const drinks = [
  {id : '1', menu : 'americano', price:1800},
  {id : '2', menu : 'cafeLatte', price: 2200},
  {id : '3', menu : 'mintTea', price : 1900}]


drinks.reduce((acc,drink)=>{
	if(drink.price>acc) {
    	return drink.price}
		return acc
	},0)
// 결과 2200

제일 저렴한 메뉴 찾기

const result = drinks.reduce((acc,drink) => {
  if(acc===null || drink.price < acc) {
    return drink.price
  }
  return acc
},null)
// 결과 1900

참고한 블로그

profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글