Jaehyun's Dev Story

공부해서 남준다.

JavaScript ES6 - 6. HTML 출력해보기

Posted on In , Disqus:

유인동님의 함수형 프로그래밍과 JavaScript ES6+ 인프런 강의를 듣고 개인적으로 정리한 내용입니다.
함수형 프로그래밍과 JavaScript ES6 HTML 출력해보기에 대해서 설명한다.

총 수량을 출력

1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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}
];

// 총 수량
const totalQuantity = products => go(products,
    map(p => p.quantity),
    reduce((a, b) => a + b));

console.log(totalQuantity(products));
console
1
> 15

products 받아서 go함수에 products를 넣는다는것은 pipe함수를 이용해도 된다.

1
2
3
const totalQuantity = pipe(
    map(p => p.quantity),
    reduce((a, b) => a + b));

합산된 모든 값 구하기

1.html
1
2
3
4
5
const totalPrice = pipe(
    map(p => p.price * p.quantity),
    reduce((a, b) => a + b));

console.log(totalPrice(products));
console
1
> 345000

중복된 함수 처리 하기

위에 코드를 보면 reduce((a, b) => a + b)) 가 중복된 것을 볼 수 있다. 코드에서 중복을 처리 하는 것은 기본이라고 생각이 든다.

1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
const add = (a, b) => a + b;

const totalQuantity = pipe(
    map(p => p.quantity),
    reduce(add));

console.log(totalQuantity(products));

const totalPrice = pipe(
    map(p => p.price * p.quantity),
    reduce(add));

console.log(totalPrice(products));
console
1
2
> 15
> 345000

추상함수 처리

위에 코드를 보면 map(p => p.quantity)와 map(p => p.price * p.quantity) 비슷한 것을 볼 수 있다. 이것에 대해서 추상 처리를 하면 더욱 더 간결해 진다.

1.html
1
2
3
4
5
6
7
8
9
10
11
12
const add = (a, b) => a + b;

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

const totalQuantity = products => sum(p => p.quantity, products);
console.log(totalQuantity(products));

const totalPrice = products => sum(p => p.price * p.quantity, products);
console.log(totalPrice(products));
console
1
2
> 15
> 345000

curry 함수 이용

products를 받는 함수가 sum이 리턴한 함수의 products전달 하기 때문에 대신해서 평가를 할 수 있다.

1.html
1
2
3
4
5
6
7
8
9
10
11
12
const add = (a, b) => a + b;

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

const totalQuantity = sum(p => p.quantity);
console.log(totalQuantity(products));

const totalPrice = sum(p => p.price * p.quantity);
console.log(totalPrice(products));
console
1
2
> 15
> 345000

HTML 코드를 이용해서 응용하기

1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 출력해보기 - 장바구니</title>
    <script src="../lib/fx.js"></script>
</head>
<body>

<div id="cart">
</div>

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

    const add = (a, b) => a + b;

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

    const totalQuantity = sum(p => p.quantity);

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

    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.isSelected ? 'checked' : ''}></td>
                        <td>${p.name}</td>
                        <td>${p.price}</td>
                        <td><input type="number" value="${p.quantity}"></td>
                        <td>${p.price * p.quantity}</td>
                    </tr>
                `))}
            <tr>
                <td colspan="3">합계</td>
                <td>${totalQuantity(filter(p => p.isSelected, products))}</td>
                <td>${totalPrice(filter(p => p.isSelected, products))}</td>
            </tr>
        </table>
    `;
</script>

</body>
</html>

HTML 출력해보기 소스코드

참조