[JS/함수형] 추상화 연습해보기

Reduce, Filter ,Go, Pipe ,Map을 활용해서, 추상화를 단계별로 해보자.

 

Redcue ,Filter,Map , Go, pipe, curry는 모두 정의되어있으며, 기본적으로 주어져 있고, Filter,Reduce,Map은 curry가 적용되어 있다고 하자.

 

제품 데이터

 const products = [
    {name: '반팔티', price: 15000, quantity: 1},
    {name: '긴팔티', price: 20000, quantity: 2},
    {name: '핸드폰케이스', price: 15000, quantity: 3},
    {name: '후드티', price: 30000, quantity: 4},
    {name: '바지', price: 25000, quantity: 5}
  ];

Problem 1. 제품의 가격을 알고 싶다.

Problem 2. 지금 가지고 있는 돈이 5만원 밖에 없고, 1가지의 품목을 산다고 할 때, 살 수 있는 최대 갯수와 제품명.

 

Step 1 

 

problem 1. 제품의 가격을 출력하는 코드

//단순히 실행한다면? 
go(
	products,
    	map(p=>p.prices),
    	console.log
)
// 변수에 담아서, 내가 활용을 하고 싶다면, pipe를 이용하는게 더 좋을듯. 
const testCode = pipe(
    map(p=>p.price),
    console.log,
)

testCode(products)

problem2. 돈이 5만원밖에 없다. 

go(
	products,
    filter(p=>p.price*p.quantity <50000),
    map(p=>p.name+","+p.price+"원"+","+p.quantity+"개"),
    console.log
)

Step 2

 

go,pipe 내부에, p=>price 등과 같이, product의 속성에 종속되어 버렸다. 이러면, 더 추상화를 시켜줘야한다.

따라서, products의 속성 값을 정하는 보조함수를 받는 새로운 show_price라는 함수를 정의한다.

 

Problem1

const show_price = (f,iter) => go(
	iter,
    	map(f),
    	console.log
)

const TestCode = products => show_price(p=>p.price,products);

TestCode(products)

 

Step 3

 

Curry를 적용해서, 가독성을 높여주고, Parameter들을 없애주자.

 

Problem1

const show_price = curry((f,iter) => go(
	iter,
    	map(f),
    	console.log
))

//함수 정의
const TestCode = show_price(p=>p.price);

//함수 call
TestCode(products)

 

Problem 2

const show_name= p=>p.name;

const show_less50000 = curry((f,iter) => go(
	  iter,
    filter(f),
    map(show_name),
    testCode.log
))

const test = show_less50000(p=>p.price*p.quantity <50000)

test(products)

CodePen

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

 

 

Ref 

위 내용은 유인동님의 강의를 개인적으로 정리한 글입니다. 감사합니다. :)

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

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