[JS/함수형] Reduce

Reduce

Reduce는 여러가지 값을 하나로 축약하는 논리를 펼칠 때 , 사용하게 되는 함수이다. Reduce를 설명할 때, 가장 많이 들게되는 덧셈의 예시이다! 이 예시로 리듀스에 대한 감을 잡고, 일단 다음단계로 활용해보자.

 

1~5까지 더하는 함수를 짠다고 하면, 이제 for ~of문도 배웠으니, 아래와 같이 짤 수 있다. 

// 1~5까지 더하는 함수 
oneToFive=[1,2,3,4,5]
let total=0

for (const n of oneToFive){
	total+=n;
}
console.log(total);

 

누적합을 어떻게, 함수형스럽게 구현을 해볼까?

• 더하는 과정은 따로 함수로 뺀다.
• 누산과정은 재귀적으로 구현이 된다.
• reduce(add,[1,2,3,4,5])와 같이 , default 값으로 다 더하는걸 구현하고 싶다면, 아래와 같이 구현할 수 있다.

//reduce()를 call 하면 15가 되도록 만들고 싶다.
// 누산되는 과정이기 때문에, 현재 저장되어있는 값과 , iterator정보를 알면됨.
// 1 더하고, 1+2,하고, 1+2+3하고...이런식으로 add가 재귀적으로 구현이 된다.
// add(add(add(0,1),2),3)

arr=[1,2,3,4,5]
const add = (a,b) => a+b;

const reduce= (f,acc,iter) =>{
	//추가!
	if (!iter){
    	iter=acc[Symobol.iterator]();
        acc=iter.next().value;
    }
	for (const a of iter){
    	acc=f(acc,a);
    }
    return acc
}

//만약, JS에서 default 값으로 배열만 던져줘도 쓸 수있도록 만들고 싶을때
// reduce(add,[1,2,3,4,5]) 또한 , 15

응용

짝수만 더해보기!

//짝수만 더하는 걸로 구현해보자!
arr=[1,2,3,4,5]
const reduce= (f,acc,iter) =>{
	//추가!
	if (!iter){
    	iter=acc[Symobol.iterator]();
        acc=iter.next().value;
    }
	for (const a of iter){
    	acc=f(acc,a);
    }
    return acc
}

reduce((total,cur)=>{cur%2===0 ? total+curr: total},0,arr);

Reduce는 예제로 덧셈이 엄청많아서 그렇지, 엄청 Powerful한 친구라고 한다.

• Iterable이라면, 특정한 값으로 축약이 가능해진다.
• 중간에 조건을 추가해서, 짝수를 걸러낸다던지, 정렬을 한다던지, 문자열에서 특정 값을 find 한다던지 등등.. 다 Reducer로 구현이 가능합니다.
• 나중에, 비동기와 합쳐진다면, 엄청난 시너지가 나온다고 합니다!

* JS에서 Reduce 또한 정의되어 있고, 아래와 같이 사용한다.

// arr.reduce(callback[, initialValue])
// 4개의 인자값을 가지는 callback
// arr.reduce(callback(acc,cur,idx,array),initial)

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

const reducer = array.reduce((prev,cur)=>prev+cur,0)

console.log(reducer)
//15

 

Reducer를 이용하여 , 짝수,홀수 판별하기

arr1=[1,2,3,4,5,6,7]

//inital value로 빈 배열을 줄 수 있다.
//이거 UseEffect에서 많이 본 형태인데?
//useEffect(()=>{},[])

const res= arr1.reduce((acc,cur)=>{
	acc.push(cur%2===0 ? "짝수":"홀수);
    return acc;
},[])
//['홀수', '짝수', '홀수', '짝수', '홀수', '짝수', '홀수']

 

Map,Filter,Reduce를 이용해서 나만의 예제 만들어보기.

 

아래와 같은 콘서트 데이터가 있다고하자!

//생각나는 콘서트의 이름이고, 가격은 임의의 가격입니다. 
const Tickets=[
  {name:"IU의 팔레트",price:100000},
  {name:"PSY워터밤",price:90000},
  {name:"분신",price:55000},
  {name:"별될시간",price:40000},
  {name:"IMJM",price:35000},
]

하고싶은 거

• 콘서트 중에서, 5만원이하 콘서트를 가고 싶다.
• 5만원 이하 콘서트들의 가격의 합을 알고싶다.

See the Pen JS_map_fiter_reducer by Doge (@DogeIsFree) on CodePen.

 

 

 

*Ref

이 글은 유인동님의 함수형 프로그래밍과 JavaScript ES6++ 를 보고 정리한 글입니다. 

https://www.inflearn.com/course/functional-es6/dashboard

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의