Search
Duplicate

장바구니 예제

총 수량, 총 가격

PREV: 테스트 대상 원천 데이터

books
구현 함수들

Step 1: 총 수량, 총 가격 구하기

const total_quantity = items => go( items,//인자값으로 받은 값을 그대로 반환(1) map(p => p.quantity),//리스트를 순회하며 각각의 객체에서 수량(p.quantity)을 꺼내어 값들을 배열로 만들어 전달(2) reduce((a, b) => a + b),// 인자값으로 받은 배열 파라미터를 덧셈으로 축약(3) ); const total_price = items => go( items, map(p => p.quantity * p.price), reduce((a, b) => a + b), ); log(total_price(books)); // 920000 log(total_quantity(books)); //22
JavaScript
복사
총 수량과 총 가격을 제대로 계산해서 출력하고 있습니다.

Step 2: go → pipe로 리팩토링

const total_quantity = pipe( map(p => p.quantity), reduce((a, b) => a + b), ); const total_price = pipe( map(p => p.quantity * p.price), reduce((a, b) => a + b), ); log(total_price(books)); log(total_quantity(books));
JavaScript
복사
기존에 인자값(items)를 받아 그대로 첫번째 인자로 넣어주는 것은 pipe로 만들어서 함수반환을 하도록 해 리팩토링 합니다.

Step 3: reduce의 인자값(a,b)⇒a+b 모듈화

const add = (a, b) => a + b; const total_quantity = pipe( map(p => p.quantity), reduce(add), ); const total_price = pipe( map(p => p.quantity * p.price), reduce(add), ); log(total_price(books)); log(total_quantity(books));
JavaScript
복사

Step 4: map, reduce 함수인자 모듈화

const add = (a, b) => a + b; const sum = (f, iter) => go( iter, map(f), reduce(add)); const total_quantity = items => sum(p => p.quantity, items); const total_price = items => sum(p=> p.quantity * p.price, items); log(total_quantity(books)); log(total_price(books));
JavaScript
복사
map과 reduce를 sum이라는 함수로 모듈화 해줬고 total_quantity와 total_price함수에서는 sum함수를 호출하도록 합니다.

Step 5: Currying 함수 적용

const add = (a, b) => a + b; const sum = curry((f, iter) => go( iter, map(f), reduce(add))); const total_quantity = sum(p => p.quantity); const total_price = sum(p => p.quantity * p.price); log(total_price(books)); log(total_quantity(books));
JavaScript
복사
Currying 을 사용하여 각각(total_price, total_quantity)에 일부 인자값을 넘겨줘어 일부분만 완성시킨 뒤 사용할 때 변동가능성이 높은 뒷 인자값을 넘겨 원하는 결과를 출력 합니다.

HTML로 출력하기

지금까지 배운 함수들을 이용하고 템플릿 리터럴을 사용해 html tag를 생성해서 붙혀봅시다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML출력해보기</title> </head> <body> <table id="cart"></table> <script> const log = console.log; const books = [ { name: "자바의정석", price: 40000, quantity: 1 }, { name: "클린아키텍처", price: 28000, quantity: 3 }, { name: "SQL첫걸음", price: 22000, quantity: 5 }, { name: "MFC윈도우프로그래밍", price: 35000, quantity: 4 }, { name: "토비의스프링", price: 98000, quantity: 2 }, { name: "친절한SQL튜닝", price: 50000, quantity: 7 }, ]; </script> <script> /* Simple Currying function */ const curry = f => (a, ..._) => _.length ? f(a, ..._) : (..._) => f(a, ..._); const map = curry((f, iter) => { let res = []; for (const i of iter) { res.push(f(i)); } return res; }); const filter = curry((f, iter) => { let res = []; for (const a of iter) { if (f(a)) res.push(a); } return res; }); const reduce = curry((f, acc, iter) => { if (!iter) { iter = acc[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = f(acc, a); } return acc; }); const go = (...args) => reduce((a, f) => f(a), args); const pipe = (...fs) => (a) => go(a, ...fs); const add = (a, b) => a + b; const sum = curry((f, iter) => go( iter, map(f), reduce(add))); const total_quantity = sum(p => p.quantity); const total_price = sum(p => p.quantity * p.price); </script> <script> document.querySelector('#cart').innerHTML = ` <tr> <th>상품 이름</th> <th>가격</th> <th>수량</th> <th>총 가격</th> </tr> ${go(books, sum(p => ` <tr> <td>${p.name}</td> <td>${p.price}</td> <td><input type="number" value="${p.quantity}"></td> <td>${p.quantity}</td> </tr> `) )} <tr> <td colspan="2">합계</td> <td>${total_price(books)}</td> <td>${total_quantity(books)}</td> </tr>` </script> </body> </html>
HTML
복사
실행결과