What do multiple arrow functions mean in JavaScript?

In this quick post we will be covering what do multiple arrow functions mean in JavaScript so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

What do multiple arrow functions mean in JavaScript?

Simply put, the use of multiple arrow functions in JavaScript means that you are creating a closure which is a function that returns another function. This is because arrow functions return whatever their right hand value is after the “arrow” part of the notation, so if another function is provided, then it will return that function.

What are multiple arrow functions in JavaScript?

JavaScript is pretty flexible which is often a good thing, but sometimes when there is a lot of flexibility there is also some confusion.

One of these times could be when you see multiple arrow functions in JavaScript.

Here is an example of multiple arrow functions in JavaScript:

const exampleFunction = () => () => {
  console.log("Hello World!")
}

Even though these functions look a little confusing, they are actually pretty straightforward.

Arrow functions that use multiple functions in a row are simply creating a closure.

A closure is a core concept of JavaScript and is one of the parts of JavaScript that add a lot of value to it.

So, what is a closure?

A closure is a function that returns another function.

If we look at the arrow function notation, we know that whatever is on the right hand side of the arrow () => "Right hand side" will be returned.

This means that if we have another arrow function on the right hand side we are then returning the second arrow function which will then create a closure.

Here is an example of a closure like this being used.

const addNumbers = a => b => a + b
addNumbers(2)(2) // 4

// or

const addTwo = addNumbers(2) // function (b) => (2 + b)
addTwo(2) // 4

When you call a closure like in the first example above (using multiple parentheses) you are doing something called currying.

The second example above is still doing the exact same thing but instead of instantly calling the second function it saves the value to be used elsewhere in the code so that it will always add the number 2 to whatever is passed in next.

Why are multiple arrow functions (closures) used In JavaScript?

There are many reasons why multiple arrow functions/closures might be used in JavaScript but the main concept to remember is that it is usually done to either contain, persist or protect a value from the outer scope.

An example of how you can persist a value with a closure and multiple arrow functions is by passing it into the first function so the value is accessible for the inner function and won’t be lost.

Using the above examples persisting a value like this would look like:

const addNumbers = a => b => a + b
const addTwo = addNumbers(2) // function (b) => (2 + b)
// 2 will now be persisted when the addTwo function is used.

This can be done for as many functions as you like so if you see more than two multiple arrow functions then that is normal and will mean it is exactly the same as the above example, just with more functions/layers of the closure.

Summary

There we have the quick fix to what do multiple arrow functions mean in JavaScript, if you want more like this be sure to check out some of my other posts!