Practical functional programming in JavaScript

Alex Moldovan
4 min readMay 29, 2016

Functional programming is a very strict programming paradigm that originates from mathematics and that is usually associated with programming languages like Haskel or Lisp. However, in recent years, functional programming concepts started to leak into other modern programming languages.

Can functional programming be practical?

A few weeks ago I spoke at DevTalks about functional programming in JavaScript. I wanted to emphasize the importance of functional programming thinking by showcasing some examples of how this style of writing code can greatly improve code readability and how it can take us closer to clean code principles. During and after my session, I got a lot of questions on the topics presented so I thought about expanding on the ideas presented in the last part of my talk, especially around the concept of function composition and how these operations have a lot of practical usage in day to day applications. As a side note, when I’m talking about function composition, I’m not talking strictly about the mathematical concept of function composition, but simply about passing functions as parameters to some predefined functions in order to create new functions. Yes, you will read the word function many times in this article!

Since there’s a lot to cover on each topic, I will split this article into two, the first part covering the concept of partial application, while the second one will focus on function decorators.

Part 1: Partial Application

Part 2: Function Decorators (coming soon)

For a bit of background on the topic, you can watch the recording of the session here and play through the slide deck here. Unfortunately I did not have time to process these together for a better viewing experience.

Partial Application

Partial application is the process of taking a function of arrity n and returning a new function of arrity m, where m<n. This new function will perform the same action as the original one, but will only accept the remaining n-m parameters. Basically, we are saying that we apply a number of parameters of the original function against the function. By doing this, we create new specialized functions that have several advantages which we will see in the following examples.

Let’s consider a binary function first to see how we can write our basic partial application function.

Our original function greet takes two parameters: a title and a name. Using the partial application, we are able to create a new function which in the end will call our original function, but will only take the name parameter. In this case of partial application, the title parameter is said to be fixed. So now we end up with a more specialized function greetSir. But that’s not the only benefit. We also have given a better naming to our greet function. We have basically given a name to the relationship that we have between the greet action and its title parameter.

You may have noticed that the partialApplication function will always fix the first parameter, while getting the second one from the new function. This process is also called left application, because the left side parameters from the original function signatures are fixed. The opposite of left apply is, of course, right apply, which will fix the right side parameters.

Adding ES2015 features, we are able to write our initial binary partial application function into a n-ary one.

With these two functions, we can perform any partial application to any function, which I think is awesome. Let’s have a look at a few examples of partial application.

As you can see, we took a general function that originally was supposed to take 3 parameters and we specialized it as much as we wanted. We also gave some specific names to our specialized functions so that we represent the relationship between the action and the applied parameters, as in the first example. Writing your code with these functions brings it closer to natural language, because the names of the functions tell you more about what should happen when the code is executed. It also eliminates the need to understand the position of each parameter in a function signature. Because functions are first class citizens in JavaScript, we are able to “abuse” the partial application functions and we are also able to compose them as we want, which is clearly visible in the last example.

This example may still be trivial, but I’m sure that you can find good examples of using it in your applications. Not once did I end up with functions that are called with the same parameters over and over again. That is a good sign that you can use partial application to make your code cleaner. Maybe another good example is the usage of external libraries which usually have a very rich API full of generic functions.

This is all there is to understand about partial application as a functional programming concept applied in JavaScript. You shouldn’t be afraid of using these constructs whenever it is needed. They bring expressiveness and simplicity at the same time and they are a natural fit into JavaScript’s functional paradigm.

One of the sources of inspiration for my presentation was this amazing talk from NDC London 2016, which I recommend to anyone who wants to see and understand the beauty of functional programming and functional style coding.

--

--

Alex Moldovan

Full-steak 🥩 developer, #javascript, #react, #graphql, #webperf. Founder of @jsheroes. I never wear matching socks🧦