How to understand chain multiple => in javascript

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.

you could always paste the code into babel - [here](http://babeljs.io/repl/) - to see the ES5 flavour — Jaromanda X, Mar 19 '17 at 22:59

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

() => {} 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.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 19 '17 at 23:00

meyer9

1,120
9
26

1

**Not all arrow functions have an implicit return call**. Only if the block body is concise (i.e. a singular expression not surrounded by curly braces with the exception of an object literal) does the arrow function have an implicit return value. Otherwise you have to _**explicitly**_ include it. – Pineda Mar 19 '17 at 23:07
Yeah, you're right. Updated answer. Thanks! – meyer9 Mar 19 '17 at 23:10

score 1 · Accepted Answer · answered Mar 19 '17 at 23:06

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) {
        //
    }
}

score 1 · Answer 3 · answered Mar 19 '17 at 23:20

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.

score 0 · Answer 4 · answered Mar 19 '17 at 22:59

=> 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);
    })();
  };
};

How to understand chain multiple => in javascript

4 Answers4