Whats a double Arrow function in javascript ?

/ / 2 min read
Tags

Wondering what exactly does a double arrow function do, how it works and when is it used ? We’ll take you through a quick tutorial explaining the same. Before explaining double arrow functions, we’ll take a quick look at arrow functions.

Arrow functions

Double Arrow Functions
Arrow functions are anonymous functions that are special because they do not bind to their own this. They get the value of this from the enclosing context. They also provide a more concise syntax.

Here is a simple example of an arrow function which explicitly returns a value. (it is called an explicit return because we made use of the keyword return.)

const sayHello = (name) => {
   return `Hello ${name}`;
}

console.log(sayHello('Stephen')); // Hello Stephen

To understand double arrow function, first you must know what is implicit return

Implicit Return

If your function is expected to return a simple value, you can use implicit return, i.e. returning something without using the return keyword.

const sayHello = (name) => `Hello ${name}`;

console.log(sayHello('Stephen')); // Hello Stephen

Double Arrow functions aka Currying

Double Arrow functions are actually curried functions. Consider the following code snippet to understand

// A simple arrow function
const myFunction = (x, y) => {
  console.log('param1', x);
  console.log('param2', y);
}

// The same function in curried form or as you say, double arrow function
const myFunction = x => y => {
   console.log('param1', x);
   console.log('param2', y);
}

// The above function without using arrow functions - 
function myFunction(x) {
    return function innerFunction(y) {
       console.log('param1', x);
       console.log('param2', y);
    }
}

An easy way to grasp this is to remember that a curried/double arrow function is a function that implicitly returns another function(s). Going by this logic, you could also have triple arrow functions and so on.

Calling Curried/double Arrow functions

The first(outer) function calls a second (inner) function to get the result, so we call the function like this –

myFunction('Foo')('Bar');

// equivalent of the above code by splitting the function calls
const exec = myFunction('Foo'); // returns function(y) { return { console.log('param1', 'Foo'); console.log('param2', y); } }
exec('Bar');                    // returns { console.log('param1', 'Foo'); console.log('param2', 'Bar');

You can check out a live example of a double arrow function action with this JS Fiddle –

Now that you’ve understand how curried functions work, lets see the use of these functions

When to use curried / Double Arrow functions?

Have you faced a situation when you have to write a callback function which has fixed parameters (arguments), but you need to pass more variables to the function without using global variables ? If your answer “yes” then curriend functions is the way how to do it.

This is best explained with the help of an example. Assume that we want to write an onClick handler. The onClick event handler receives only 1 parameter by default i.e. the event. But what if we also wanted to pass another parameter, say Id to it ?

If you try something like this, it won’t work and the Id will be undefined.

const handleClick = (e, id) {
  event.preventDefault()
  // id will be undefined
}

Therefore we make use of a curried function which returns another function having its own scope of variables without any global variables.

const handleClick = id => event {
  event.preventDefault();

  // do something with the received ID
  console.log('ID received', id); 
}

// within your html
<button onClick=handleClick('45')>

Hope that helps! 🙂

References

Leave a Reply