# Poor man’s JS Pipe operator

_Idea from Timur Xazamov https://x.com/nanot1m/status/1720494020651020562_

<img width="592" height="636" src="https://gist.github.com/user-attachments/assets/adf10569-2ce6-48c3-a034-dd46904bd03b" />

## Summary

While waiting for the [JS pipe operator] `|>`, maybe we can use `($=…, $=…, $)` instead.

Either locally declare `let $;` or treat `$` as a shared global volatile var:

```js
const foo = (
  $= 2,
  $= bar($),
  $= $.hello.world(),
  $= await fetch($),
  await $.json()
)
```

## Examples

Translating the official examples to this pattern:

[JS pipe operator]:https://github.com/tc39/proposal-pipeline-operator

<table>
<thead>
<th>Pipeline</th>
<th>Equivalent</th>
</thead>

<tbody>

<tr>
<td>

```js
Object.keys(envars)
  .map(envar => `${envar}=${envars[envar]}`)
  .join(' ')
  |> `$ ${%}`
  |> chalk.dim(%, 'node', args.join(' '))
  |> console.log(%);
```

</td>
<td>

```js
$= Object.keys(envars)
     .map(envar => `${envar}=${envars[envar]}`)
     .join(' ')
$= `$ ${$}`
$= chalk.dim($, 'node', args.join(' '))
console.log($)
```

</td>
</tr>

<tr>
<td>

```js
const envVarFormat = vars =>
  Object.keys(vars)
    .map(var => `${var}=${vars[var]}`)
    .join(' ')
    |> chalk.dim(%, 'node', args.join(' '));
```

</td>
<td>

```js
const envVarFormat = vars => (
  $= Object.keys(vars)
    .map(var => `${var}=${vars[var]}`)
    .join(' '),
  chalk.dim($, 'node', args.join(' '))
)
```

</td>
</tr>

<tr>
<td>

```jsx
return (
  <ul>
    {
      values
        |> Object.keys(%)
        |> [...Array.from(new Set(%))]
        |> %.map(envar => (
          <li onClick={
            () => doStuff(values)
          }>{envar}</li>
        ))
    }
  </ul>
);
```

</td>
<td>

```jsx
return (
  <ul>
    {(
      $= values,
      $= Object.keys($),
      $= [...Array.from(new Set($))],
      $.map(envar => (
        <li onClick={
          () => doStuff(values)
        }>{envar}</li>
      ))
    )}
  </ul>
);
```

</td>
</tr>

<tr>
<td>


```js
const x = foo()
  |> bar(%)
  |> () => log(%) // closure
  |> baz(%)
  |> done(%)
```

</td>
<td>

```js
const x = (
  $= foo(),
  $= bar($),
  $= ($$=>
        () => log($$)
     )($),
  $= baz($),
  done($)
)
```

</td>
</tr>

</tbody>
</table>