HTML 출력 — 함수형으로 장바구니 만들기

앞에서 만든 go, map, filter, reduce, curry를 실제 DOM 렌더링에 적용해봤다. 장바구니 UI를 명령형 없이 함수 조합만으로 만드는 게 목표였다.

sum 함수

반복적으로 쓰이는 패턴인 map → reduce(add)를 sum으로 추상화했다.

const sum = curry((f, iter) => go(
  iter,
  map(f),
  reduce(add)
));

const total_quantity = sum(p => p.quantity);
const total_price = sum(p => p.price * p.quantity);

sum에 변환 함수만 넘기면 어떤 값이든 합산할 수 있다.

테이블 렌더링

go 안에서 sum으로 HTML 문자열을 만들었다.

document.querySelector('#cart').innerHTML = `
  <table>
    <tr>
      <th></th>
      <th>상품 이름</th>
      <th>가격</th>
      <th>수량</th>
      <th>총 가격</th>
    </tr>
    ${go(products, sum(p => `
      <tr>
        <td><input type="checkbox" ${p.is_selected ? 'checked' : ''}></td>
        <td>${p.name}</td>
        <td>${p.price}</td>
        <td>${p.quantity}</td>
        <td>${p.price * p.quantity}</td>
      </tr>
    `))}
    <tr>
      <td colspan="2">합계</td>
      <td>${total_quantity(filter(p => p.is_selected, products))}</td>
      <td>${total_price(filter(p => p.is_selected, products))}</td>
    </tr>
  </table>
`;

sum은 map(f) → reduce(add) 구조로, 각 상품의 HTML 문자열을 + 연산으로 이어붙인 단일 문자열을 반환한다. 반복문 없이 선언적으로 마크업을 만든다는 게 핵심이었다.