JavaScript borrows clean code feature from F# and Julia programming languages in new Babel release

The new features in the latest release of the Babel JavaScript transpiler -- used by Facebook, Netflix and many others.

Node.js JavaScript vs PHP: Which programming language is winning over developers? A report highlights the growing popularity of Node.js JavaScript as a server-side language to support online sites and services.

JavaScript has come a long way from being so unpredictable it inspired a stand-up routine.

But developers are often not able to take advantage of the syntactic sugar that has been sprinkled on the language in recent years, due to writing code that has to run on older web browsers.

This is where a transpiler like Babel can come in handy. Babel converts code written using the latest version of JavaScript into older JavaScript that can run in existing and legacy browsers.

Using a transpiler allows developers to take advantage of newer JavaScript features, for example, allowing developers to write more readable code and making asynchronous programming easier.

This week saw the release of Babel 7.5, which takes another step towards adding support for a handy feature from the F# and Julia programming languages to JavaScript.

SEE: How to build a successful developer career (free PDF)    

The release can be configured to recognize the F# pipeline operator, which is represented by the symbols |>.

The operator provides an alternative way of calling a function with a single argument, for example, allowing the code on line 2 to be written as the code on line 3.

    1. function repeat (str) {
      return str + ", " + str;
    }

    2. repeat("hello")

    3. "hello" |> repeat

This pipeline operator allows developers to write more readable code when chaining functions together, where the result of one function is passed to the next and so on.

Say you had defined the following functions, which respectively repeat a word, capitalize a word, and append an exclamation point.

function repeat (str) { 

 return str + ", " + str; 

function capitalize (str) { 

 return str[0].toUpperCase() + str.substring(1); 

function exclaim (str) { 

 return str + '!'; 

}

Here is how you could chain the functions together in JavaScript without using the pipeline operator:

let result = exclaim(capitalize(repeat("hello")));
result //=> "Hello, hello!"

And here are these functions chained together using the pipeline operator:

let result = "hello"
  |> repeat
  |> capitalize
  |> exclaim;

result //=> "Hello, hello!"

The pipeline operator is still at the proposal phase, which means it has to be enabled in Babel by adding @babel/plugin-proposal-pipeline-operator to the Babel configuration file. 

There are currently five variants of the pipeline operator being evaluated before the operator is added Babel proper, with Babel 7.5 adding support for the F# variant of the operator, alongside the existing minimal and Smart variants. 

The F# pipeline operator can be used with functions that take multiple arguments, by using it in combination with JavaScript's arrow function. The arrow function is also used alongside the F# pipeline operator when working with the await keyword in asynchronous programming. You can read more details about the pipeline operator and how it can be used with Babel here.

Babel 7.5 also does away with the need to rely on multiple babel plug-ins to allow it to parse dynamic imports for different JavaScript module bundlers, such as webpack and rollup. Instead, developers are now able to simply add @babel/plugin-syntax-dynamic-import plugin to the Babel configuration file.

Babel doesn't only transpile from newer JavaScript code but also from the JavaScript spin-off TypeScript.

This latest Babel release also allows developers to use TypeScript's namespaces in their code. Namespaces allow developers to tell the computer to split their code into smaller, distinct blocks where they can be more confident that names for variables, functions, and objects won't clash.

Experimental support for namespaces can be added to Babel's TypeScript plugin by including the following in Babel's configuration file.

module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

A full list of other features and fixes in the Babel 7.5 release can be found here.

Babel is used by many major companies, including Facebook, Netflix, Cloudflare, PayPal, airbnb, to name a few.

To find out more about the popular JavaScript spin-off language TypeScript, read TechRepublic's round-up of the best free resources for learning the language online.

Also see