function() {} and () => {} , is same?

Question

I have a study code that I am currently using:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>

    <script type="text/javascript">
      var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500);

      var data = [30, 20, 40];

      var circles = svg.selectAll('circle')
        .data(data).enter()
        .append('circle')
          .attr('cx', (d, i) => i * 30 + 20)
          .attr('cy', 30)
          .attr('r', d => d / 2)
          .style('fill', 'steelblue');

      circles.on('mouseenter', () => {
        d3.select(this).style('fill', 'red');
      });
      circles.on('mouseout', function() {
        d3.select(this).style('fill', 'steelblue');
      })
    </script>
  </body>
</html>

The mouseenter function is not working, but the mouseout function is fine.
Please tell me the difference about function() {} with () => {}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — angrykoala, Dec 11 '18 at 14:37
Just google it D: https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch — Elias, Dec 11 '18 at 14:38
They are not the same, otherwise there'd be no point in having two different things, would there? ;) — Niet the Dark Absol, Dec 11 '18 at 14:38

score 0 · Answer 1 · answered Dec 11 '18 at 14:39

0

The difference is the lexical use of this in (fat) arrow functions.

Jake explains it perfectly here- What is lexical 'this'?

answered Dec 11 '18 at 14:39

Joe

74
1
10

score 0 · Answer 2 · answered Dec 11 '18 at 14:39

0

One difference is that function(){} gets it's own this where ()=>{} gets the this from where it was called. This article explains more in depth the differences between the two.

answered Dec 11 '18 at 14:39

mika

343
1
14

function() {} and () => {} , is same?

2 Answers2