[Javascript] Function Pipeline

1. Function Pipeline

const addFive = (x) => x + 5;
const double = (x) => x * 2;
const minusOne = (x) => x - 1;

const result = minusOne(addFive(double(10)));

특정 값을 여러 함수에 순차적으로 전달하여 결과를 사용하는 코드는 가독성이 떨어집니다. Pipe를 정의하고 이를 사용해 코드 리팩토링 시 가독성이 좋아질 것입니다. 

1) 코드 정의 

// common.ts
export const _ = {
    filter(predicate) {
        return (array) => array.filter(predicate);
    },
    sort(compareFn) {
        return (arr) => arr.sort(compareFn);
    },
    map(fn) {
        return (arr) => arr.map(fn);
    },
    getLength(arr) {
        return arr.length;
    },
    isLength(arr) {
        return !!arr.length;
    },
    // ...등등 자주사용할 만한 function들?
};

export const commonPipe = (...funcs) => v => {
    return funcs.reduce((res, func) => {
        return func(res);
    }, v);
};

2) 활용

[예시1]

const addFive = (x) => x + 5;
const double = (x) => x * 2;
const minusOne = (x) => x - 1;

// 기존코드
const result = minusOne(addFive(double(10)));

// Pipe코드
commonPipe(
  double,
  addFive,
  minusOne
)(10);

[예시 2]
// 기존코드
list.filter((seat) => {
      return Status.Ready === seat.status || Status.Seated === seat.status || Status.Empty === seat.status;
}).length;

// Pipe코드
const checkSeatStatus = (seat) => {
        return (
                Status.Ready === seat.status
                || Status.Seated === seat.status
                || Status.Empty === seat.status
            );
    };

    commonPipe(
        _.filter(checkSeatStatus),
        _.getLength,
    )(seatList);

 

2. Pipe Operator

파이프 연산자는 '|>' 기호를 사용하며 현재 ECMAScript 표준위원회에서 활발히 논의되고는 있지만, 표준에 포함될지 알 수 없는 단계입니다. 만약 나중에 pipe연산자가 생긴다면...

const result = minusOne(addFive(double(10)));

// pipe 연산자
const result = 10 |> double |> addFive |> minusOne;

위와 같이 사용될 수 있다고합니다만, 커뮤니티에서는 여러 사유로 반대되고 있다고 합니다.

참고사이트
https://ui.toast.com/weekly-pick/ko_20201118

https://velog.io/@keumky1/%ED%95%A8%EC%88%98%ED%98%95-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Pipe%EB%A1%9C-%EA%B0%80%EB%8F%85%EC%84%B1%EC%9D%84-%ED%96%A5%EC%83%81%EC%8B%9C%ED%82%A4%EC%9E%90