Arrow Functions and Functional Style
The fluency of single-line arrow functions truly shines in the functional style of programming. In this style of programming, we use function composition—a series of transformations—to make the code expressive and easier to maintain. Functional style code removes accidental complexity that’s present in the imperative style of programming.
Let’s explore this with a few examples. Suppose we’re given a list of names and asked to create a comma-separated result string with names of length five, all in uppercase. Try implementing that code using the traditional for loop. It’s a simple problem but not a simple solution—that’s accidental complexity. Here’s an imperative implementation:
| | const pickNamesInUpperCaseOfLength = function(names, length) { |
| | let result = ''; |
| | |
| | for(let i = 0; i < names.length; i++) { |
| | if(names[i].length === length) { |
| | result += names[i].toUpperCase() + ', '; |
| | } |
| | } |
| | |
| | return result.substring(0, result.length - 2); |
| | }; |
The imperative style code has two major smells:
-
It involves mutability; the variable result is being mutated throughout the iteration.
-
We have to tell it what to do and also every step of how to do it.
We can remove this complexity by writing code in the functional style.
The functional style of programming is not new in JavaScript. It’s been around since the beginning of JavaScript, but most programmers using JavaScript preferred the imperative way instead of the functional style. One reason for this is most programmers used some other mainstream language, like C++, Java, or C#, in addition to JavaScript. Since most mainstream languages, until recently, supported the imperative style—it was easier to use the same style across the board.
The functional style uses higher-order functions, where a function may receive a function as an argument or return a function as result. We’re used to receiving and/or returning primitive types and instances of classes. With higher-order functions, we can extend that to receiving/returning functions. This leads to a nice way to perform function composition.
JavaScript provides higher-order functions like filter() and map() on arrays. Let’s rewrite the previous code using higher-order functions, but by passing traditional functions as arguments instead of using arrow functions:
| | const pickNamesInUpperCaseOfLength = function(names, length) { |
| | return names.filter(function(name) { return name.length === length; }) |
| | .map(function(name) { return name.toUpperCase(); }) |
| | .join(', '); |
| | }; |
Instead of using the traditional for loop to iterate, we use internal iterators like filter() and map(). The filter() function cherry picks the elements from the collection that satisfy the given predicate—the anonymous function argument to filter(). The map() function then transforms the selected names to uppercase, again using the anonymous function passed as an argument to map(). Finally, the join() function concatenates the strings in the collection into a single string separated by commas.
The arrow functions were largely introduced to remove the noise in code like this. The anonymous functions passed to filter() and map() are short, yet so much ceremony is there—function, return, and the ;. We can readily replace the anonymous functions in the previous example with arrow functions.
| | const pickNamesInUpperCaseOfLength = function(names, length) { |
| | return names.filter((name) => name.length === length) |
| | .map((name) => name.toUpperCase()) |
| | .join(', '); |
| | }; |
In most languages that support the functional style of programming, lambda expressions—JavaScript calls them arrow functions—have lexical scope for any variable not defined as a parameter or locally. JavaScript arrow functions are semantically aligned with that expectation and work well for short single-line functions in functional pipeline.
Like many programmers, including your humble author, if you’re used to the imperative style of programming, it will take a bit of time and learning to start coding in functional style. With practice it gets better, and the thinking in functional style becomes more natural and eventually second nature.