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

앞에서 만든 map filter reduce 함수를 함께 중첩해서 사용해본다.

map filter reduce함수를 구현해 놓은걸 아래와 같이 해놓고 import 해준다.

// 파일명 fxx.js
const log = console.log;

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

const filter = (f, iter) => {
    let res = [];
    for (const a of iter) {
        if (f(a)) res.push(a);
    }
    return res;
};

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;
};

아래코드를 함수형 함수인 map filter reduce함수를 통해서 데이터를 다뤄보면서 응용에 대해서 다뤄본다.

우선 가격들을 뽑는 map함수를 만든다. products를 돌면서 price를 뽑는 코드를 보자.

<script src="./fxx.js"></script>

    const products = [
        { name: '반팔티', price: 15000 },
        { name: '긴팔티', price: 20000 },
        { name: '핸드폰케이스', price: 15000 },
        { name: '후드티', price: 30000 },
        { name: '바지', price: 25000 }
    ];
    
    log(map(p => p.price, products));
    
    =>
    // [15000, 20000, 15000, 30000, 25000]

특정금액 이하의 상품들만 뽑고 싶다 예를들면 20000원 이하의 상품들만 뽑고 싶다고 하면 map이 받는 products를 축약해주면 된다. filter를 사용해본다.

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

//  [15000, 15000]

이제는 2만원 미만의 가격들을 다 합친 가격을 뽑고 싶으면 아래와 같이 코드를 작성할 수 있다.(reduce 사용)

오른쪽에서 왼쪽으로 읽어나가면 프러덕츠를 2만원 미만으로 filter하고 해당하는 값을 map을 통해 뽑고 해당하는 모든 값을 add로 출력을 하면 3만원이 된다. 

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

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

이렇게도 작성할 수 있다. 먼저 filter을 하지않고 map을 하면서 price를 뽑아주고 filter에서는 2만미만의 숫자를 정의해줘도 동일하게 3만이 나오게 된다.

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

즉 함수형 프로그래밍에서는 함수를 중첩하고 함수들을 연속적으로 실행하면서 products값으로부터 출발해서 filter를 하고 해당하는 값을 map을 통해서 원하는 값으로 추출을 하고 reduce를 통해서 축약해 나가면서 하나의 값으로 평가를 만들어서 마지막을 처리하는 식으로 하게된다.

 

 

 

만약 reduce를 하는데 add를 할꺼면 아래와 같이 잘 동작할 준비가 된 코드를 작성할 수 있다.

    log(
        reduce (
            add,
            [10, 20, 30, 40]
        )
    );

이 자리에서 숫자가 들어있는 배열로 코드를 작성하면 되겠구나라고 생각한다. 숫자들이 들어있는 배열을 평가를 시키겠다. 코드를 작성해서 코드가 평가되었을 때 숫자들이 들어있을거라고 기대를 하면서 작성을 한다.

 

숫자가 들어있는 것들로 평가하고 reduce add는 문제없이 이전에 작성했던 reduce add와 동일하게 동작을 해서 특정 숫자로 평가해서 log로 전달이 될 것을 기대한다.

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

그리고 products자리 역시 특정조건에 products들만 남겨져 있는 배열로 평가되도록 작성하면 되겠다 생각하면 된다.

예를 들면 아래와 같다.

    log(
        reduce(
            add,
            map(p => p.price, [
                { name: '반팔티', price: 15000 },
                { name: '핸드폰케이스', price: 15000 }
            ])));

그래서 filter를 하면서 2만원 보다 작은 상품들을 만들어 가는 것이다.

함수형 프로그래밍에서는 이렇게 사고하면서 프로그래밍을 해나간다.

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

 

<출처 : 유인동 함수형 프로그래밍과 JavaScript ES6+>

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

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