이터러블 중심 프로그래밍 실무적인 코드

<script>
    const arr = [
        [1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [9, 10]
    ];

    go(arr,
        L.flatten,
        L.filter(a => a % 2),
        L.map(a => a * a),
        take(4),
        reduce(add),
        log);
</script>

 

 

 

위에 코드와 완전 같은 일을 하는데 데이터만 실무적인 것으로 바꿔보자. 아래는 사람들에 대한 데이터이다.

4명의 유저 length가 4인 데이터가 들어있고 각 user마다 family가 있고 family라는 키에는 이름과 나이가 있다.

<script>
    var users = [
        {
            name: 'a', age: 21, family: [
                { name: 'a1', age: 53 }, { name: 'a2', age: 47 },
                { name: 'a3', age: 16 }, { name: 'a4', age: 15 }
            ]
        },
        {
            name: 'b', age: 24, family: [
                { name: 'b1', age: 58 }, { name: 'b2', age: 51 },
                { name: 'b3', age: 19 }, { name: 'b4', age: 22 }
            ]
        },
        {
            name: 'c', age: 31, family: [
                { name: 'c1', age: 64 }, { name: 'c2', age: 62 }
            ]
        },
        {
            name: 'd', age: 20, family: [
                { name: 'd1', age: 42 }, { name: 'd2', age: 42 },
                { name: 'd3', age: 11 }, { name: 'd4', age: 7 }
            ]
        }
    ];

</script>

맨 위에 코드와 완전히 똑같은 코드를 사용해서 users의 family를 뽑는다.(map을 통해서)  

    go(users,
        L.map(u => u.family),
        L.flatten,
        // L.filter(a => a % 2),
        // L.map(a => a * a),
        // take(4),
        // reduce(add),
        takeAll,
        log);

filter를 하면서 user의 나이가 20세 미만인 사람들 즉 성인이 아닌 가족들을 뽑아내고(filter를 이용해서) 해당하는 구성원의 이름을 뽑고(map) 4명만 확인을 해본다 하면 아래와 같이 나온다. 

    go(users,
        L.map(u => u.family),
        L.flatten,
        L.filter(u => u.age < 20),
        L.map(u => u.name),
        take(4),
        // reduce(add),
        takeAll,
        log);

즉 a라는 유저를 꺼내겠다고 하고(L.map) 하나씩 펼치는 것이다.(L.flatten)

하나씩 펼치면서 L.filter에서 유저의 나이가 20세 미만인 사람들만 골라낸다. take(4)니까 20세 미만인 사람들이 4명 나올 때 까지 뽑고 map을 통해 이름을 확인한다.

        {
            name: 'a', age: 21, family: [
                { name: 'a1', age: 53 }, { name: 'a2', age: 47 },
                { name: 'a3', age: 16 }, { name: 'a4', age: 15 }
            ]
        },
        {
            name: 'b', age: 24, family: [
                { name: 'b1', age: 58 }, { name: 'b2', age: 51 },
                { name: 'b3', age: 19 }, { name: 'b4', age: 22 }
            ]
        },
        {
            name: 'c', age: 31, family: [
                { name: 'c1', age: 64 }, { name: 'c2', age: 62 }
            ]
        },
        {
            name: 'd', age: 20, family: [
                { name: 'd1', age: 42 }, { name: 'd2', age: 42 },
                { name: 'd3', age: 11 }, { name: 'd4', age: 7 }
            ]
        }
    ];

아래와 같이 L.map을 map으로 바꾸고 take와 순서를 바꿔도 동작한다.

    go(users,
        L.map(u => u.family),
        L.flatten,
        L.filter(u => u.age < 20),
        take(4),
        map(u => u.name),
        // reduce(add),
        takeAll,
        log);

유저들의 나이를 뽑으면 아래와 같다. 즉 유저 4명의 가족들 중에 20세 미만인 사람들을 꺼내는데(filter) 자료구조가 해당하는 유저 안쪽에 있는 key에 있는 배열을 이용하는 것이다.(이번에는 take(3)를 해서 3명까지만 뽑자.)

 

그리고 나이를 reduce를 통해 더해보자.

    go(users,
        L.map(u => u.family),
        L.flatten,
        L.filter(u => u.age < 20),
        L.map(u => u.age),
        take(4),
        // reduce(add),
        takeAll,
        log);
        
        
        // (3) [16, 15, 19]

    go(users,
        L.map(u => u.family),
        L.flatten,
        L.filter(u => u.age < 20),
        L.map(u => u.age),
        take(3),
        reduce(add),
        log);
        
        // 50

 

L.flattn과 L.map을 한 것을 flatMap으로 바꿀 수도 있다.

  go(users,
    L.flatMap(u => u.family),
    L.filter(u => u.age < 20),
    L.map(u => u.age),
    take(3),
    reduce(add),
    log);
    
    // 50

 

이걸 통해서 함수형 프로그래밍은 데이터를 어떻게 구성할지를 만들어내고 프로그래밍을 하는 것이 아니고

 

조합되어 있는 함수에 맞는 식으로 작성을 한다고 이해할 수 있다.

 

객체지향 프로그래밍은(OOP) 데이터를 우선적으로 정리를 하고 메소드를 그 이후에 만들면서 작성을 해 나간다면

 

함수형 프로그래밍은 이미 만들어져 있는 함수 조합이 있다면 그 함수조합에 맞는 데이터를 구성하는 식으로 프로그래밍을 하는 것이고 함수가 우선순위에 있는 프로그래밍이기 때문에 함수형 프로그래밍이라고 부른다.

 

그리고 위와 같은 프로그래밍이 리스트 프로세싱이고 자바스크립트에서는 iterable processing 하고 있는 것이다.

즉 iterable programming, collections programming, applicative programming은 고차함수를 조합하면서 보조함수를 데이터에 적절하게 조합하면서 어떤 일을 하려고 할 때 추상적으로 flatMap을 한 다음 filter한 다음 map한 다음 take해서 reduce하겠다라고 사고하면서 프로그래밍하는것이 함수형 프로그래밍이다.

 

 

 

 

 

 

 

 

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

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

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