Monday, 11 March, 2019 UTC
Summary
The JavaScript pipeline operator proposal, which is currently a Stage 1 proposal, would add a new operator to JavaScript. This new operator would would act as syntax sugar to extend and make chained function more readable.
To demonstrate, let’s start with a simple example without the use of the pipeline operator:
// assume that `withHello`, `withWave` and `capitalize` are available let greeting = withHello(withWave(capitalize('alligator'))) console.log(greeting) // Hello, Alligator 👋 Now the same example, but using the proposed pipeline operator:
let greeting = 'alligator' |> capitalize |> withWave |> withHello console.log(greeting) // Hello, Alligator 👋 Or formatted in a more readable way like so:
let greeting = 'alligator' |> capitalize |> withWave |> withHello console.log(greeting) // Hello, Alligator 👋 As you can see, the pipeline operator can really help make the code more clear and readable, and ultimately more maintainable.
With multiple recursive function calls, the innermost function is called first, which means that the order in which the calls are written needs to be from the last function call to the first, which can be a bit of a backwards way to think about and write code. With the pipeline operator, the written order is reversed and the first function call is added first.
🐊 Alligator.io recommends:
ES6 for Everyone → A video course to learn modern JavaScriptⓘ About this affiliate link
As this proposal is still very early stage, you won’t find any support in current browsers. We can make use of Babel to allow us to use it today, and have transpiled code that works in all browsers.
To get started make sure that you installed Node.js on your machine.
Let’s create a new folder and initialize a new project:
$ mkdir pipeline-operator $ cd !$ $ yarn init -y $ touch index.js In bash
!$ means the last argument of the last command. Initialize Babel
Now let’s install the Babel dev dependency for our project:
$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator Create a new file called
.babelrc in the project directory:$ touch .babelrc Copy and paste the following settings into
.babelrc:{ "plugins":[ [ "@babel/plugin-proposal-pipeline-operator", { "proposal":"minimal" } ] ] } Add a
start script into the project’s package.json file, which will run babel:"scripts": { "start": "babel index.js --out-file pipeline.js --watch" } Start using Babel with the use of our new
start script:$ yarn start Don't stop this script while you're working, it's in watch mode so it'll continue doing its job as you change the file. Instead just open another console tab to run the outputted JavaScript file (
pipeline.js). And that’s it, we’re now ready to use the pipeline operator in our code! 🎉
Usage
Let’s first create some helper functions to work with:
index.js
function withPrefix(string, prefix = "Hello, ") { return prefix + string; }; function withSuffix(string, suffix = "It's me!") { return string + suffix; } function capitalize(string) { return string[0].toUpperCase() + string.substr(1); } function lowerCase(string) { return string.toLowerCase(); } Let’s see how we would use them without the pipeline operator:
index.js
let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')))) console.log(greeting) // Hello, world it's me! // With arguments let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ') console.log(greeting) // Hi there, world. we love you <3 The code looks a tad confusing, right? Let’s now look at what it would look like with the pipeline operator:
index.js
let greeting = 'WORLD' |> capitalize |> lowerCase |> withSuffix |> withPrefix console.log(greeting) // Hello, world it's me! // With arguments let greeting = 'WORLD' |> capitalize |> lowerCase |> (str => withSuffix(str, '. We love you <3')) |> (str => withPrefix(str, 'Hi there, ')) console.log(greeting) // Hi there, world. we love you <3 Run the code with:
$ node pipeline.js As you can see, it’s just as easy to use with function arguments.
Arguments
// ... |> (str => withPrefix(str, 'Hi there, ')) It’s just an arrow function. It’s first argument is what we are trying to process, the string
'WORLD' in our case.You can even use built-in methods:
index.js
let greetingArray = 'WORLD' |> withPrefix |> (str => str.toLowerCase()) |> capitalize |> (str => str.split('')) console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"] I hope that this article was useful for you. Remember that it’s just syntax sugar. It’s up to you to use it or not. If you enjoy this article, subscribe to receive more cool articles.