사전준비

---

1. map

데이터에서 이름을 추출할 때

// 명령형 코드
// 이름만 빼내기
let names = [];
for (const p of products) {
   names.push(p.name);
}
log(names);

데이터에서 나이를 가격을 추출할 때

let prices = [];
for (const p of products) {
   names.push(p.price);
}
log(prices);

👆🏻 불필요한 중복이 발생한다.
이럴 때 사용하는 것이 map

const map = (f, iter) => {
    let res = [];
    for (const a of iter) {
        res.push(f(a));
    }
    return res;
};
    
log(map(p => p.name, products));
log(map(p => p.price, products));

---

2. 이터러블 프로토콜을 따른 map의 다형성

log(document.querySelectorAll('*').map);  // -> undefined

document.querySelectorAll은 array를 상속받은 객체가 아니라서 prototype에 map함수가 구현이 안되어있음

log([1, 2, 3].map(a => a + 1));

log(map(el => el.nodeName, document.querySelectorAll('*')));

const it = document.querySelectorAll('*')[Symbol.iterator]();
log(it.next());
log(it.next());
log(it.next());
log(it.next());
log(it.next());

function *gen() { //제너레이터 생성
    yield 2;
    if (false) yield 3;
    yield 4;
}

log(map(a => a * a, gen()));

+

let m = new Map();
m.set('a', 10);
m.set('b', 20);
log(new Map(map(([k, a]) => [k, a * 2], m)));

---

3. filter

// 명령형 코드
let under20000 = [];
for (const p of products) {
    if (p.price < 20000) under20000.push(p);
}
log(...under20000);

다른 조건을 만드려면 코드 복사해야 되서 불필요한 중복이 발생하므로
filter로 리팩토링 한다.

const filter = (f, iter) => { //f가 함수임(걸러낼 조건!)
    let res = [];
    for (const a of iter) {
        if (f(a)) res.push(a);
    }
    return res;
};

log(...filter(p => p.price < 20000, products));

log(...filter(p => p.price >= 20000, products));

log(filter(n => n % 2, [1, 2, 3, 4]));

log(filter(n => n % 2, function* () {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}()));

---

4. reduce

reduce : 이터러블 값을 축약하는 함수

기본 사용법 1

const reduce = () => {

};

log(reduce());

기본 사용법 2

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

log(reduce(add, 0, [1, 2, 3, 4, 5])); // -> 15
log(add(add(add(add(add(0, 1), 2), 3), 4), 5)); // -> 15
log(reduce(add, [1, 2, 3, 4, 5])); // -> 15

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

log(reduce());

products의 모든 price를 더하는 것을 reduce만 써서 구현하면

log(reduce(
    (total_price, product) =>
      total_price + product.price, 0, products));

---

5. map + filter + reduce 중첩 사용과 함수형 사고

사전준비 - fx.js파일 생성

연동

<script src="../lib/fx.js"></script>

ex) 20,000원 미만의 상품의 가격을 모두 합치기

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

log( //출력할거야
    reduce( //값을 함수에 넣어서 축약할건데
        add, //그 함수는 add이고 값은 데이터에서 추출(map)해낼거야
        map(p => p.price, //뭘 추출할거냐면 가격
            filter(p => p.price < 20000, products)))); //근데 가격이 20000원 미만인 것을 필터링할거야

ex) 20,000원 이상의 상품의 가격을 모두 합치기

log(
    reduce(
        add,
        filter(n => n >= 20000,
            map(p => p.price, products))));