> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/func/kind/higher/pipe.md).

# pipe(f, g, ...)

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [function](/web/js/val/func.md) ⟩ [higher-order](/web/js/val/func/kind/higher.md) ⟩ example ⟩ pipe()

{% hint style="success" %}
function composition.

```javascript
pipe(f, g, h)(x) === h(g(f(x)))
compose(f, g, h)(x) === f(g(h(x)))
```

{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}

* replit ⟩ [pipe(f1, f2, ...)](https://replit.com/@pegasusroe/pipef1-f2#index.js)

```javascript
// ⭐ pipe:  
// - pipe(f1, f2, f3 ...)(x,y,z ...) =  ...f3(f2(f1(x,y,z ...)))
//        ╰── funcs ───╯ ╰──args──╯
function pipe(...funcs) {
    return function(...args) {
        return funcs.slice(1).reduce(
            (result, f) => f.call(this, result),  // r = ...f3(f2(r))
            funcs[0].apply(this, args)            // r = f1(x,y,z ...)
        );
    };
}

// ⭐ compose: 
// - compose(f, g, h)(x) = f(g(h(x))) = pipe(h, g, f)(x)
function compose(...funcs) {
    return pipe(...funcs.slice().reverse());
}
```

* example

```javascript
const sum = (x, y) => x + y;
const square = x => x * x;
const add3 = x => x + 3;

compose(square, sum)(2, 3)        // 25
pipe(sum, square)(2, 3)           // 25
pipe(sum, square, add3)(2, 3)     // 28
```

{% endtab %}

{% tab title="👥 相關" %}

* [Boolean](/web/js/val/prim/boolean.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 8.8.2 Higher-Order Functions ⭐️ 
* [ ] Eloquent JavaScript ⟩ [higher-order functions](https://eloquentjavascript.net/05_higher_order.html#h_xxCc98lOBK)
  {% endtab %}
  {% endtabs %}