Converting => () => to ES5

Question

I'm in the process of converting some scripting from from ES6 to ES5 due to a dependency on the system executing the scripts. I'm running into an issue with this particular command:

transition.selectAll('path.hidden-arc')
   .attrTween('d', d => () => middleArcLine(d));

I'm not sure what they're trying to accomplish with the '=> () =>' syntax and am unsure how to convert this to ES5 standard functions. Any help is greatly appreciated.

It depends on where/how “middleArcLine” is defined. Read up on the difference between “arrow functions” and “anonymous functions”, which should also show to to covert to functionally equivalent forms. — user2864740, Aug 05 '20 at 02:39
That's D3. The `attrTween` method requires a factory function that returns another function, an interpolator: https://github.com/d3/d3-transition#transition_attrTween — Gerardo Furtado, Aug 05 '20 at 02:39
Also, that is a function that returns a function. It is equivalent to (d) => (() => middleArcLine(d)) — user2864740, Aug 05 '20 at 02:40
Related: [Convert Arrow function to function expression](https://stackoverflow.com/q/58081773/1595451) — Rubén, Aug 05 '20 at 02:43

jason_r · Accepted Answer · 2020-08-05T17:14:39.003

6

It's using arrow functions to represent a function that returns a function that returns the value from calling the middleArcline function. In ES5 it could look something like this:

transition.selectAll('path.hidden-arc').attrTween('d', function (d) {
    return function () {
        return middleArcLine(d);
    };
});

Note that Babel is a great tool for compiling between different versions of JavaScript

edited Aug 05 '20 at 17:14

answered Aug 05 '20 at 02:40

jason_r

345
1
11

That was it, thanks! I'll definitely check out Babel. – Josh Simmons Aug 05 '20 at 02:52

Vasanth Gopal · Answer 2 · 2020-08-05T02:40:26.893

4

I guess it's a function calling a function. Try this

transition.selectAll('path.hidden-arc')
   .attrTween('d', function (d) {
                       return function() {
                           return middleArcLine(d)
                       }
                   }
             );

I might be wrong, but just attempting it.

edited Aug 05 '20 at 02:40

answered Aug 05 '20 at 02:39

Vasanth Gopal

1,215
10
11

1

you missed couple returns – zerkms Aug 05 '20 at 02:40

score 0 · Answer 3 · answered Aug 05 '20 at 02:41

0

transition.selectAll('path.hidden-arc')
   .attrTween('d', function (d) {
                       return function() {
                         return   middleArcLine(d)
                       }
             );

answered Aug 05 '20 at 02:41

Rahul Cv

725
5
12

Converting => () => to ES5

3 Answers3