코드를 값으로 다루어 표현력 높이기(go)

함수형 프로그래밍에서는 코드를 값으로 다루는 아이디어를 많이 사용하는데 코드를 값으로 다룰 수 있기 때문에 어떤함수가 코드인 함수를 받아서 평가하는 시점을 원하는대로 다룰수가 있기 때문에 코드의 표현력을 높인다던지 굉장히 재밌고 좋은 아이디어들을 가지고 있다.

 

코드를 값으로 다루는 함수를 만들어서 표현력을 좋게하고 읽기좋게하는 아이디어들을 확인한다.

아래코드를 보자. 중첩이 많이 되지는 않았지만 함수중첩이 조금 되어 있어서 코드를 읽을 때 조금 복잡해 보이는 느낌이 있다. 

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

<script>
    const products = [
        { name: '반팔티', price: 15000 },
        { name: '긴팔티', price: 20000 },
        { name: '핸드폰케이스', price: 15000 },
        { name: '후드티', price: 30000 },
        { name: '바지', price: 25000 }
    ];

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

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

코드를 읽기 편하게 변경을 해보면 우선 go라는 함수를 만들어본다. 아래와 같이 사용한다. 0이 a에 가서 a+1이 되고 그럼 이 값이 밑으로 내려가 1+10이 되고 10+100이 되고 연속적으로 실행되서 원하는 값 111이 출력되도록 하는 함수를 만들려고 한다.

  const go = () => {};

  go(
    add(0, 1),
    a => a + 10,
    a => a + 100,
    log);
  // 111

인자들을 하나의 값으로 축약해 나가면 된다. 예를 들어 들어오는 값이 list라고 하면 인자들이 들어왔다고 했을 때 인자의 첫번째 인자를 그 다음 인자인 함수에게 전달을 하고 함수의 결과를 다음 함수의 인자에게 전달하는 식으로 연속적으로 하나의 일을 하는 것이다. 즉 reduce라는 이야기이다. args를 특정함수로 축약해서 하나의 값으로 만들어가는 거라고 볼 수 있다.

 

구현을 해보자. args를 전체를 전달 해서 0 첫번째 값이 뽑혀서 나온다. 그리고 reduce안에서 첫번째 값으로는 a 즉 0이 들어오고 두번째 값으로는 함수가 들어오게 된다. 0+1이 된 상태의 결과가 다음번째의 a가 되는 것이다. 그리고 a+10이 그 다음으로 들어오게 되고 연속적으로 실행되면서 log에 마지막 결과까지 전달하면서 출력이 된다. 

<script>
    const go = (...args) => reduce((a, f) => f(a), args);

    go(
        0,
        a => a + 1,
        a => a + 10,
        a => a + 100,
        log);
</script>

이렇게 reduce라는 함수를 사용하면 특정 list를 축약해 나가는 코드를 작성할 때 재밌고 쉽게 만들어 나갈 수 있다.

 

 

 

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

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

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