DEV Community

Muzammil
Muzammil

Posted on

Multiple arrow operators in a single function

We may have come across arrow functions in javascript and are almost saturated learning about the difference between normal functions and arrow functions, the difference between ES5 and ES6 and everything that is connected to it. But everytime we come across multiple arrows in a single function, we keep struggling - or it could just be a "me" problem. Here goes, what multiple arrows in a function mean.

A simple ES6 function that demonstrates it:-

const add = x => y => x + y
Enter fullscreen mode Exit fullscreen mode

This can be written in ES5 functional format like this:

function add(x){
 return function(y){
  return x + y
 }
}
Enter fullscreen mode Exit fullscreen mode

The above code explains what is going on with multiple arrow operators. It returns a function which in turn accepts a parameter, the nested returned function maintains the state of x. This methodology is called currying.

To call the above function, we follow a slightly different syntax. React developers who have worked on Redux would have come across such function calls when using the connect function. Here we go:-

add(2)(3)
// This would return 5
Enter fullscreen mode Exit fullscreen mode

That's just another javascript basics that could help you crack your dream job interview. Thank me later! 😉

Top comments (0)