[ Javascript ] Pipe 연산자

Lutica_·2025년 10월 11일

읽기에 앞서

  • 본 게시물에서 소개하는 pipe 연산자는 pipe()에 붙어있는 stream관련 pipe가 아닙니다.
  • 함수형 프로그래밍에서 코드의 가독성을 높이고 데이터의 흐름을 명확하게 표현하기 위해 제안된 |> 연산자에 대해 소개합니다. 읽기전에 유의바랍니다.
  • 정식 명칭은 Pipe Operator입니다.

Pipe 연산자에 대해서

  • F#이라는 언어에서, Pipe라는 개념이 탄생했다.

Idea

  • 값을 받은 그대로 다른 연산의 입력으로 사용하게 하는 구조로서, 작은 요소들의 합성함수로 표협되는 프로시저를 한눈에 볼 수 있게 정리한 개념이다.
  • 이는 객체의 메서드를 연이어 호출하는 메서드 체이닝(Method Chaining) 과 비슷해 보이지만, 근본적인 차이가 있다.

메서드 체이닝

  • 객체.메서드1().메서드2()처럼 객체의 상태를 기반으로 동작한다.

파이프 연산자

  • 값 |> 함수1 |> 함수2 처럼 값(value) 자체를 다음 함수의 인자로 전달한다..
  • 객체가 아니어도, 어떤 값이든 처리 흐름을 만들 수 있다.

    가끔은 그 값에 객체를 포함할 수는 있지만, 그것은 권장하지 않는다..

다른 언어 사용 예시

Linux

  • ps | grep "chrome"
  • 프로세스 목록을(ps) 받아, 그 결과를 "chrome"이라는 텍스트로 필터링(grep)한다.

F#

let result = value |> fn1 |> fn2 |> fn3

  • JS가 제안하는 파이프 연산자의 원형이다.

PHP (PHP 8.5)

  • PHP 8.5부터 배포되었다.
$result = "Hello World"
    |> strtoupper(...)
    |> str_shuffle(...)
    |> trim(...);

// "LWHO LDLROE"

Pipe 연산자 논의 현황

  • 자바스크립트 표준을 정하는 TC39 위원회에서 현재 Stage 2 단계에 머물러 있다.
  • 이는 "초안(Draft)" 단계로, 기능에 대한 명세는 확정되었지만 정식 표준으로 채택되기 전까지 변경될 가능성이 있다.
  • 다만, 2023년에 멈춘것으로 보았을 때, 이러한 기능이 논의되었다. 정도로 보는 것이 좋을지도 모른다. (가능성은 남아있지만...)

    이는 사실 논의를 보면, qs.get("limit") |> (% ? parseInt(%, 10) : undefined)와 같은 코드를 보았을 때, F# Style (|>) vs Hack Style (|> with % placeholder)의 싸움이 발생한 것으로 보인다.

  • 자세히는 여기를 보자.

사용할 수는 있다...

  • babel을 설치하고, @babel/plugin-proposal-pipeline-operator 설치 후 아래 방식으로 config을 해주자.
// babel.config.json 예시
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]
  ]
}

Pipe 연산자의 필요성

  • 아래 코드를 보자.
function f1(x) {
  return x+10;
}
function f2(x) {
  return x*10;
}
function f3(x,y) {
  return x*y + y
}

const y1 = f1(1)
const y2 = f2(y1);
const y3 = f3(y2,1);
// 혹은,
const yt = f3(f2(f1(1)), 1); // 뭐라는거야

console.log(y3);
  • 그렇다면, 이제 아래 코드를 보자.
function f1(x) {
  return x+10;
}
function f2(x) {
  return x*10;
}
function f3(x,y) {
  return x*y + y
}
const y = 1 |> f1 |> f2 |> (a=>f3(a,1))

console.log(y);
  • 이 둘을 보면, 값을 중심으로 단순 선형적인 느낌이 강해진다.
  • 디버깅이나 코드 가독성면에서 부분적으로 채택하면 도움 될 것으로 생각한다.

결론

  • 사실 이게 그렇게 중요한 연산자인지는 의문일 수 있다.
  • 하지만 AI에게 데이터를 검증하거나, 파이프라이닝을 검증해야 할 때가 온다면, 내 생각에는 이런 방법론이 도움이 될 것으로 생각된다.
profile
해보고 싶고, 하고 싶은 걸 하는 사람

0개의 댓글