Blog / Quick-fixes

What do multiple arrow functions mean in JavaScript?

What do multiple arrow functions mean in JavaScript?

In this post find the quick and simple solution for what do multiple arrow functions mean in JavaScript? - Quick Fix Series!

Will MaygerWill Mayger
August 03, 2021
Article

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!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Become an expert in ReactJS, TypeScript, and JavaScript.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app