자바스크립트 파이핑

Cover image by arbyreed on Flickr.

JavaScript는 점점 더 많은 기능적 프로그래밍 기능을 제공하고 있으며 기존 기능은 새로운 기능pipeline operator입니다.

연산자는 stage-1 이므로 표준에 바로 포함되지는 않지만 babel 의 도움으로 이미 사용할 수 있습니다.

왜

객체 지향 배경에서 왔다면 아마도 점 연산자를 많이 사용했을 것입니다. 많은 라이브러리에서 이를 사용하여 종종 유창한 인터페이스라고 하는 작은 DSL을 구현하여 좋은 가독성으로 작업을 완료하는 데 도움이 됩니다.

예를 들어 Moment.js

moment().add(2, "days").substract(10, "hours").toString();

기능적 대안은 date-fns/fp 이지만 보시다시피 중첩된 함수 호출로 인해 읽기가 약간 어렵습니다.

format("D MMMM YYYY", subHours(10, addDays(2, new Date())));

이제 기능 코드에서도 이러한 종류의 왼쪽에서 오른쪽 가독성을 갖는 것이 좋지 않을까요?

뭐

새로운 파이핑 연산자가 유용할 때 이런 종류의 코드를 더 읽기 쉽게 만들 수 있습니다.

f(10);

된다

10 |> f;

따라서 위의 date-fns/fp 예는 다음과 같습니다.

const add2Days = addDays(2);
const sub10Hours = subHours(10);
const customFormat = format("D MMMM YYYY");

new Date() |> add2Days |> sub10Hours |> customFormat;

또는 간단히:

new Date()
|> addDays(2)
|> subHours(10)
|> format("D MMMM YYYY");

보시다시피 연산자에는 하나의 인수만 필요한 함수가 필요합니다. date-fns/fp 함수는 하나의 인수로만 호출될 때 이러한 함수를 반환합니다.

이것은 하나의 결과를 반환하는 약속 위에 빌드되기 때문에 비동기 함수에서도 작동합니다.

"USERID_123"
|> await loadUserFromApi // async
|> extractUserImageUrl   // sync
|> await cropUserImage;  // async

결론

다시 말하지만, JavaScript는 FP 방향으로 한 걸음 더 나아가 이미 추가된 기능 위에 빌드합니다. 특히 서버 측 데이터 변환 코드는 이러한 방식으로 작성된 코드로부터 이익을 얻을 것입니다.