How to understand chain multiple => in javascript [duplicate]

Question

I am reading below source code in javascript:

const switchTo = (menu, select) => (e) => {
  e.preventDefault();
  select(e.target.value);
  action(() => _.map(menu, ($val, $key) => _.set(menu, $key, false)))();
  action(() => _.set(menu, e.target.value, true))();
};

what I don't understand is the first line which includes two => operators. What does this syntax mean? Whether we have a name for that? I don't even know how to search this kind of syntax.

Answer 1

() => {} is almost same as function() {}. Just remember that in arrow functions, there is an implicit return call. Also, when the arrow function call is only a single statement, you won't need the parentheses and they have an implicit return call (thanks @Pineda).

For example, this expression: () => _.map(menu, ($val, $key) => _.set(menu, $key, false))

Can be replaced with:

function() {
  return _.map(menu, function($val, $key) {
    return _.set(menu, $key, false)
  }
}

Also, remember arrow functions are lexically scoped, so this has a different meaning.

Answer 2

The following syntax describes a function who will accept a and b and return the sum of the two:

const sum = (a, b) => a + b;

Which traditionally looks like:

function sum(a, b) {
    return a + b;
}

In your case, the chained () => represents another function using the () => { } syntax being returned:

const x = (a, b) => (c) => {
    //              ^^^^^^^^   The returned function.
    //
};

Which traditionally looks like:

function x(a, b) {
    return function(c) {
        //
    }
}

Answer 3

It's a higher-order function in that it returns another function. This is actually pretty easy to read once you're used to this notation. When you see multiple =>s, read each of them but the last one as return a function. Whatever is on the left-hand side of the =>, can be closure'd so to say in the returned function. The last => is the actual action you want to perform.

switchTo from your example, when invoked like this:

switchTo(myMenuElement, mySelectElement)

produces an event handler that can be attached, for instance, to an element's onclick event. When invoked in response the a click event, it'll be passed an event arg e as usual. The only difference here will be the fact that the handler is now aware of myMenuElement and mySelectElement and can do something with them too, in addition to e.

Answer 4

=> is a part of an arrow function expression. The first => creates a function that returns second function created with another =>.

Your code transpiled to pure JavaScript with Babel REPL:

var switchTo = function switchTo(menu, select) {
  return function (e) {
    e.preventDefault();
    select(e.target.value);
    action(function () {
      return _.map(menu, function ($val, $key) {
        return _.set(menu, $key, false);
      });
    })();
    action(function () {
      return _.set(menu, e.target.value, true);
    })();
  };
};