As programming geeks know, “classical” programming languages, like C/C++ and Java, are Imperative. This means you tell the computer how to do something and it does it. By contrast, functional languages are Declarative – you tell the computer the outcome you want. In his talk “JavaScript functional programming: our misunderstood friend” at Codemotion Berlin 2018, Matteo Hertel of Skyscanner told us how he learned to embrace functional programming (FP), and gave some nice examples of how to write functional JavaScript code.
Matteo started off by explaining the difference between imperative and declarative code. His slides have a pretty gradient as a background. Using CSS (which is declarative), you just tell the render engine to set a gradient. Using imperative code, you would have to use for-loops to iterate through every pixel, setting the right colour each time.
He went on to explain the key concepts underpinning FP:
- Mappers convert an input into an output e.g. the
map() method - Predicates apply a test and return true or false e.g. the
filter() method - Reducers combine 2 values together e.g. the
reduce() method
He then showed how these concepts can be used in JavaScript programming.
A simple example
I will use one of his examples to illustrate how you can convert imperative code into declarative code. Imagine you have a list of cities that you want to convert to upper-case. The following snippet of imperative code does this using a for-loop:
So, how can you do this in a functional style? The answer is to use map(), which will take each element in the original string and use toUpperCase() to make it upper-case:
But can you do better? Well, yes. Ideally, for testability, you want to move the upper-case functionality to a separate method which Matteo called shout():
Combining functions
The cool thing about FP is that you can start to chain functions together. The following snippet chains together a filter(), a map() and a reduce(), along with a function that removes Edinburgh from the list:
But Matteo highlighted that this snippet uses lots of points – each function in the chain is calling the city parameter. This is seen as bad coding style, so he finished with a cleaner point-free version of the code, which can be read like a story:
Using FP for real
When asked about combining functional and imperative programming, Matteo explained that JS makes it really easy to start using functional programming, since you can refactor your code a bit at a time. This is because JavaScript was designed to allow functional and imperative programming to be combined. Unlike pure functional languages (e.g. Haskell), JS allows for side effects (where something outside the scope of the function is modified).
Matteo left us all feeling excited about functional programming, and suggested we check out Kyle Simpson’s FP course on Frontend Masters. I, for one, will definitely give it a go!