The real reason why JavaScript has arrow functions
By: Martin Novák
Tags: Functional Javascript, JavaScript, Js, Javascript Tips, Functional Programming

Took arrow function in the knee!

Nowadays, all my code is based on the use of arrow functions. If you are still not using them yourself, then don’t be ashamed of who you are. That’s your parent’s job. Instead, find about all the benefits that you can get by using arrow functions like the cool kids.

This is an example of arrow function and the same code written traditionally:

You may notice that the code is shorter and that there is an arrow. Everything before the arrow is arguments of the function and everything after the arrow is always returned as the result of the function.

If you need a function that contains multiple statements you can still do this:

Arrow functions are often also called lambda functions and they are not unique to JavaScript. Python is a good example of a language that also has lambda functions. Python syntax looks like this:

Keep them simple

The use of arrow functions will motivate you to keep your functions simpler following the KISS principle (Keep-it-simple-stupid) and single responsibility principle (each function should be responsible only for one thing).

In general, I write my arrow functions without the use of curly brackets {}. If the function starts looking hard to read or I feel like I need multiple statements, it’s a flag that I need to break it into multiple smaller functions.

Coding this way makes your functions more reusable and easier to test. At the same time, your functions can get more descriptive names and it helps your code if all your function names can tell you exactly what the function does.

First-class functions

JavaScript already has first-class functions. That means that functions are used as regular variables. They can be arguments for other functions or they can return functions as their result. An example, that you are surely familiar with is here:

In the example, we pass an anonymous function as an argument to addEventListener . This method is often used in JavaScript for callbacks.

An example of a function returning a function can be written like this:

But with arrow functions, this is much cleaner:

You can read this very easily, simply everything, before the last arrow is arguments and everything after the last arrow, is evaluation. Because in fact, we are working with multiple functions, we also need to use multiple function-calls fn(call1)(call2);

Partial Application

Before long, you can start using your arrow functions to compose them as legos through a partial application. Partial application allows you to create a sort of specialized version of a function by supplying some of the arguments. Let’s see here with an example:

In a way, it is similar to the use of functions with default values but partial application actually adds more versatility.

Functions written this way are called curried. They are a sequence of unary/monadic functions typical for functional programming.

Functional Programming

As you might have guessed already, the real reason why we have arrow functions is functional programming. Functional programming is a declarative programming paradigm that relies on the composition of pure functions.

Functional programming is an alternative to object-oriented programming preferred by many developers (me included). You can, of course, choose to argue which one is better but it is very clear that functional programming is awesome and you should feel bad for ever thinking otherwise.

Pure functions in functional programming are functions that rely only on their input and always return some value. They never change (mutate) any other variables and they don’t rely on any other external data outside of their input. This leads to referential transparency which makes programming easier.

And yes, it is actually possible to write a whole lot of code without changing any variables anywhere.

As you have noticed, arrow functions are made to be a transformation (mapping) between their input and output. They don’t need even a return statement in their short version without curly brackets.

Arrow functions summary

Arrow functions make your syntax shorter. Shorter syntax means less writing and reading.

Arrow functions help make your code pure and testable. And that just makes you a better developer. You have probably been an awesome developer even before but now you can be a brilliant developer without even trying.

Arrow functions help you transition towards functional programming. Functional programming is cool. It turns you into an artist composing code out of elegant small functions.

Real functional example

To see where this rabbit hole leads, let's have a look at an example using open-source library @7urtle/lambda.

Using arrow functions and learning functional programming is very addictive. It helps you write shorter elegant code with better performance and reusability.

JavaScript can be sometimes tricky with its inconsistency between a C-like syntax and functional programming features. To help people get the most out of it and provide learning materials, I have built the @7urtle/lambda library. You can pick up functional programming at your own speed and the website www.7urtle.com helps you learn about the paradigm while giving you the tools you need.