[JS] pipe operator

문제

흔히 JS를 이용해서 코드르 작성할 때, 함수를 통해 반환하는 값을 다른 함수에 이용하고, 그리고 이 과정을 반복하는 경우가 많다.

const a = pow(30, 2);
const b = pow(a, 30);
const c = pow(a, 30);

or
pow(pow(pow(30, 2), 30), 30));

or
30.pow(2).pow(30).pow(30);

위와 같이 작성하는 경우
1. 깊이가 점점 깊어지는 문제
2. 불필요한 변수가 할당되는 문제

가 필연적으로 발생한다.
(1) 은 가독성을 해치므로 문제가 되는데, (2) 는 공감이 잘 가지 않을 수 있다.
하지만 Martin Fowler의 글에서도 설명하지만[1], 변수명 정하는 것은 아주 어려운 일이다. 즉, 시간이 불필요하게 소요될 수 있는 것을 의미한다.

하지만 우리는 fluent interface[2]를 이용해서, 이 문제들을 해결하고 있다.
그런데 fluent interface는 언어레벨에서 제공하는 기능이 아니므로, JS의 native keyword와 조합해서 사용할 수 없는 문제가 있다.

따라서, 특정 값을 연속해서 활용하는 것은 항상 기능 구현하는데에 overhead가 따르게된다.

해결

아직 정확히 어떤 문법을 사용할지는 정해지지 않아서, 어떤 방식으로 해결할 예정인지만 간략히 설명하겠다.

const result = 30 |> pow(^, 2) |> pow(^, 30) |> pow(^, 30);

와 같은 코드가 될 예정이다.

풀어서 설명하자면,
|>를 통해 value를 pipe처럼 연속적으로 사용하는 것이다.
1. 30이 ^를 통해 불러와져서, 계산됨
2. (1)에서 계산된 값이 ^로 불러와져서 pow(^, 30)이 계산됨
3. (2)에서 계산된 값이 ^로 불러와져서 pow(^, 30)이 계산됨
4. 마지막으로 result에 할당됨

마무리

위 기능을 Babel을 통해 미리 사용하는 것은 가능하다.

하지만, 현재 Stage2상태여서 빨라도 ECMAScript에 1년안에 적용될 내용은 아닌거 같다.

매우 유익한 토론이 진행 중이니, 오픈소스 커뮤니티에서는 어떤 식으로 논의가 진행되는지 확인하면 좋을 것이다.

Ref

1. https://martinfowler.com/bliki/TwoHardThings.html
2. https://en.wikipedia.org/wiki/Fluent_interface
3. https://github.com/tc39/proposal-pipeline-operator