Originally seduced by the Erlang weird syntax, I walked around some functional oriented languages. All was providing a sweet and smart syntax. The last one I played around was Elm. The syntax of Elm was clean, and beautiful.

Meeting Elm, raise in my mind a new challenge : Find the most beautiful “pure” Javascript Functional Programming syntax.

The biggest part of this challenge is to keep all the javascript capabilities with the minimum of requirements. Or by keeping the common requirements.

Let’s do this !

Functional you said ?

So, functional programming is a paradigm based on the way that mathematical functions would be evaluated in code. Software as driven as a big function which is the combination of many little one. Where each function use their input to give its output in a linear way.

I do not have the pretension, to be able to teach you, in this little paragraph, how to lead functional programming. So, I will let Charles Scalfani to do that thing for me.

The perfect example

Since I am able to learn only by examples, I took the choice to share you my thoughts unwinding with an example.

I choose as perfect example, the quicksort algorithm. No more sputters : This is my javascript version of this algorithm.

This function works into the recursivity way and is visibly splitted into three parts.

The first line, is the termination condition (or base case) : attempt to sort a list without any element returns an empty list.

Second block, is the internal variables definition ; with in line 6 & 7, the two parts of the list regarding to the pivot.

Then, the last line, was the concatenation of sorted parts and the pivot as function return.

Pretty easy, isnt it ?

Divide and rule

As said earlier, composition, is a great part of functional programing. So let’s refactor our code for further compositions.

At this state, this does not look very cool or sexy, because we turn a simple ten-lines function into a thirty-lines composed code.

But, this is an example ; and this is not the end.

ES2015 is awesome !

ES2015 (or ES6) came with a lot of great features. And the most awesome is fat arrow function notation. Fat arrows provides many functionalities, but, we will choose them, first, for their light syntax.

Fat arrows functions was used to illustrate all examples into the great Functional Programming Jargon reading.

You look good, fat arrows are not the only one ES2015 features used here.

I walked accross more of them.

A litle bit triky..

Firstly, I used Parameter Matching and the Rest Operator, both are new ES2015 features, that made working with lists as easy as done in Erlang.

As the same, I used the Spead Operator for lists concatenation.

But, I decided to go further to turn this into a more sweet functional code.

Easily, I removed all variable definitions, functions compositions, is really great at this state.

And a new weird trick appaeared (line 10). This, is a guard using the form I proposed to Functionnal Programming Jargon.

TL;DR explanation : This guard form is based on ternary operator. So if the [condition ?] is evaluated to true, the first part is used as return the empty array in this case. However, if the guard is evaluated to false, the function corpse is executed. You can use as many guard as you wish by stacking ternaries.

ES2078 is coming

To perform ES2015 transformation into “vanilla” Javascript sources, I use Babel. And Babel come with a lot of plugins, I have selected two of them for you.

The first one, Transform Curry seem really cool IMHO, It provided a way to use currying placeholders. And this is a great value for going deep into functionnal programming.

The second “one”, is a more a way to add pipe operator to perform function composition. Thanks to three different approach but for reaching the same goal. Pipe Operator, Pipe Operator Curry, Pipe Composition.

This example, show you my work for the plugin Pipe Operator Curry.

Looks Good To Me

So, our code, look really good right now !

All functions, are greatly sized, and pretty sweet to read. We use some tricks, but not too easy to understand.

But we can do a little bit more to enhance a bit further.

Type, Types, Typed

I am one of those who think, type checking is a good advancement in Javascript. So as many of us, I used Flow. Flow, look really good and can be invisibly part of the code.

So, let’s add type checking to our new sweet syntax.

Do you comment your code ?

The final part is about comments ; I tried several ways to comment out functions. And finally, I have decided to create mine.

A one line way to describe function accoding to the function programming common definition, based on its inputs and ouptut.

So, what are you thinking about this most beautiful Javascript Functional Programming syntax ?