{"id":28098023,"url":"https://github.com/wavelop/js-pipe-functions","last_synced_at":"2025-10-24T02:48:39.513Z","repository":{"id":40769324,"uuid":"261780439","full_name":"Wavelop/js-pipe-functions","owner":"Wavelop","description":"Solution for pipe functions in Javascript. ","archived":false,"fork":false,"pushed_at":"2023-01-06T05:11:22.000Z","size":664,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-06-30T16:04:02.260Z","etag":null,"topics":["functional-programming","javascript","pipe"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wavelop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-06T14:14:58.000Z","updated_at":"2021-09-15T13:32:39.000Z","dependencies_parsed_at":"2023-02-05T09:30:55.146Z","dependency_job_id":null,"html_url":"https://github.com/Wavelop/js-pipe-functions","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavelop%2Fjs-pipe-functions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavelop%2Fjs-pipe-functions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavelop%2Fjs-pipe-functions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wavelop%2Fjs-pipe-functions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wavelop","download_url":"https://codeload.github.com/Wavelop/js-pipe-functions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253996812,"owners_count":21996756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["functional-programming","javascript","pipe"],"created_at":"2025-05-13T17:47:31.514Z","updated_at":"2025-10-24T02:48:39.410Z","avatar_url":"https://github.com/Wavelop.png","language":"JavaScript","readme":"# Javascript Pipe Function\n\nIn this article we are going to see some concepts of functional programming: we are going to give a definition and implement a pipe function in Javascript.\n\n## Table of contents\n\n- [What is a pipe function?](#what)\n- [Implementing a pipe function](#implement)\n- [Reduce: refactor the pipe function](#refactor)\n- [Validation pipeline: pipe function without args](#voidpipeline)\n- [Next Step: The pipeline operator \"|\u003e\" (experimental)](#nextstep)\n- [References](#ref)\n- [Conclusions](#conclusion)\n\n\u003ch2 id=\"what\"\u003eWhat is a pipe function?\u003c/h2\u003e\n\nThe concept of *pipe* can often be interpreted in different ways, depending on context.  \nThis is the definition of **pipe** based on the Linux's article: [Pipes: A Brief Introduction](http://www.linfo.org/pipes.html).\n\n\u003e A **pipe is a form of redirection** that is used in Linux and other Unix-like operating systems to send the output of one program to another program for further processing.\n\nAnd: \n\n\u003e Pipes are used to create what can be visualized as a pipeline of commands, which is a temporary direct connection between two or more simple programs. This connection makes possible the performance of some highly specialized task that none of the constituent programs could perform by themselves. A command is merely an instruction provided by a user telling a computer to do something, such as launch a program. The command line programs that do the further processing are referred to as filters.\n\nWe can define **pipe function**:\n\n\u003e A **pipe function** is a function that accepts a series of functions, which process an input parameter and return a **output** which will be the *input* for the next function.\n\n### Functional programming\n\nThe *pipe function* concept is related **functional programming**.  \n**Functional programming** is a programming paradigm where programs are constructed by **applying** and **composing** functions. \n\nThe goal is to compose **pure functions** avoiding shared state, mutable data, and side-effects. Functional programming is **declarative** rather than imperative which change the state of the program.\n\nIn Javascript there are several functions for functional programming, including **reduce**, which we are going to see later.\n\n\u003ch2 id=\"implement\"\u003eImplementing a pipe function\u003c/h2\u003e\n\nWe know that a pipe function take a series of functions and each function execute a series of operation based on the result of the previous function.\nWe can start with a simple problem and evolve our **pipe function** step by step:\n\n*Given a number in input, first, add 2 and then multiply it by 2.*\n\nThe result expression is:\n\n    (n + 2) * 2\n\nFollowing the paradigm of *programmazione funzionale* awe would therefore have two **atomic functions**:\n\n```javascript\n// Sum 2 to n\nconst sumTwo = n =\u003e {\n    return n + 2;\n}\n\n// Multiply 2 to n\nconst multiplyTwo = n =\u003e {\n    return n * 2;\n}\n```\n* **sumTwo**: takes a number as input and returns the sum of the number with 2;\n* **multiplyTwo**: takes a number as input and returns the multiplication of the number by 2;\n\nThe result:\n\n```javascript\nconsole.log(multiplyTwo(sumTwo(1))); // 6\n```\n\nGeneralize the result: encapsulating in a pipe function.\n\n```javascript\nconst pipe = (funA, funB) =\u003e (arg) =\u003e funB(funA(arg));\nconst result = pipe(sumTwo, multiplyTwo)(1);\nconsole.log(result); // 6\n```\n\n\u003ch2 id=\"refactor\"\u003eReduce: refactor the pipe function\u003c/h2\u003e\n\nLast example, however, is limited only to pipe function of 2 functions, while, as previously explained, the objective is to accept **N** functions. Following the **pipe function** made in the previous chapter, the resulting implementation would be something like:\n\n```javascript\nconst pipe = (funA, funB, funC, ... , funN) =\u003e (arg) =\u003e {\n  funN( ... funC(funB(funA(arg)))); \n}\n```\n\nNow we can use Javascript's method [**Reduce**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), that executes a **reducer function** (that you provide) on each element of the array, resulting in single output value.\n\nSo we obtain our **Pipe Function**:\n\n```javascript\nconst _reduced = (f, g) =\u003e (...args) =\u003e g(f(...args));\nconst pipe = (...fns) =\u003e fns.reduce(_reduced);\n\n// Example\nconst res = pipe(\n  sumTwo,\n  multiplyTwo,\n  moduleByTwo,\n)(1)\n\nconsole.log(res); // 0\n```\n\n### Explanation of reduce\n\nThe *reducer* function takes four arguments:\n- Accumulator (acc)\n- Current Value (cur)\n- Current Index (idx)\n- Source Array (src)\n\nYour reducer function's returned value is assigned to the *accumulator*, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, *single resulting value*.\n\n```\n# Index: 0\n_reduced = sumTwo(arg)\n\n# Index: 1\n_reduced = (_reduced, multiplyTwo) =\u003e multiplyTwo(_reduced) -\u003e multiplyTwo(sumTwo(arg))\n\n# Index: 2\n_reduced = (_reduced, moduleByTwo) =\u003e moduleByTwo(_reduced) -\u003e moduleByTwo(multiplyTwo(sumTwo(arg)))\n\nres = moduleByTwo(multiplyTwo(sumTwo(arg)))(1)\n```\n\n\n\u003ch2 id=\"voidpipeline\"\u003eValidation pipeline: pipe function without args\u003c/h2\u003e\n\nIn some cases we need to perform a series of functions without worrying about the result of the previous function. A use case could be the validation of an element.  \nAn element need to pass a series of functions that verify its validity (otherwise they throw an exception). We don't know if these functions modify the element passed and it could be useful to always use the first value, consequently we are going to modify the reduced in this way:\n\n```javascript\nconst validationPipe = (...fns) =\u003e (...args) =\u003e fns.reduce((res, func) =\u003e func(...args), ...args);\n\n// Example\ntry {\n  pipe(\n    isNumber,\n    isGreaterThan10,\n    isAMultipleOf2,\n  )(12)\n\n  // Valid\n\n} catch (e) {\n  // Invalid\n}\n```\n\n\u003ch2 id=\"nextstep\"\u003eNext Step: The pipeline operator \"|\u003e\" (experimental)\u003c/h2\u003e\n\nRecently Javascript introduce the experimental **pipeline operator (|\u003e)**.\n[The MDN definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator):\n\n\u003e The experimental pipeline operator |\u003e (currently at stage 1) pipes the value of an expression into a function.\n\nThis operator allow to write function like this:\n```javascript\nlet url = decodeURI(\"%21\");\n```\nIn:\n```javascript\nlet url = \"%21\" |\u003e decodeURI;\n```\n\nSo, we can obtain:\n\n```javascript\n// Nested function\nconst res = moduleByTwo(multiplyTwo(sumTwo(arg)))(1);\n\n// Pipe function\nconst res = pipe(\n  sumTwo,\n  multiplyTwo,\n  moduleByTwo,\n)(1);\n\n// Pipeline operator\nconst res = 1 |\u003e sumTwo |\u003e multiplyTwo |\u003e moduleByTwo;\n```\n\n\u003ch2 id=\"ref\"\u003eReferences\u003c/h2\u003e\n\n *  http://www.linfo.org/pipes.html\n *  https://www.python.it/doc/articoli/funct.html\n *  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce\n *  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator\n\n\n\u003ch2 id=\"conclusion\"\u003eConclusions\u003c/h2\u003e\n\nThese are some possible solutions to develop your own **pipe function** and follow the paradigms of **functional programming**.\n\nIf you enjoy this repo, add a ⭐️.\n\nYour support and feedback means a lot for us.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwavelop%2Fjs-pipe-functions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwavelop%2Fjs-pipe-functions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwavelop%2Fjs-pipe-functions/lists"}