0

The ECMAScript 6 standard added many new features to the JavaScript language, including a new arrow function notation.

At the moment I transpile my code to es6. Now there are sometimes two options. And I wonder which one is the better.

Use a named function if possible: 

document.getElementById('rotate').addEventListener('change', function rotate() {
  rotate(parseInt(this.value, 10));
});

Use a arrow function if possible:

document.getElementById('rotate').addEventListener('input', (event) => {
  rotate(parseInt(event.target.value, 10));
});

Up to know I now this

named function

  • It is possible to see the function name in an error stack.

Arrow functions

  • Simple syntax.

Are there any other advantages or disadvantages

astridx
  • 6,581
  • 4
  • 17
  • 35
  • *"At the moment I transpile my code to es6."* ES5 you mean? – T.J. Crowder Feb 24 '18 at 15:19
  • Arrow functions don't maintain their own `this` (they grab the `this` from the outer lexical environment) which makes them useful in a bunch of situations (see binding). They also don't have their own `arguments`, but I've yet to find an example where that's been useful in my own work. – Andy Feb 24 '18 at 15:19
  • 3
    I think this is answered by [*What's the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?*](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) (whose answers include a thorough description of how arrow functions differ from `function` functions). – T.J. Crowder Feb 24 '18 at 15:21
  • 1
    You can check the answers here : https://stackoverflow.com/a/34361380/452213 and https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/ – sudip Feb 24 '18 at 15:34
  • Thank you for your answers. My question was which type would I use best if I could use both. If I understand it all correctly, then the simpler syntax is the only advantage of an arrow function. If I prefer the named functions, then I can use them as well. – astridx Feb 27 '18 at 10:29

1 Answers1

-1

Lexical this can be accessed inside arrow functions, they can't access arguments and cannot be bound.

Regular functions can access dynamic this, arguments and can be bound.

The decision which one has to be used as callback is made based on this. If no this is involved, arrow function can be used as a rule of thumb.

Most APIs that accept callbacks (e.g. native addEventListener and jQuery), provide their context as callback parameter as well, so dynamic this isn't needed, and they can be used with arrows.

Some APIs (e.g. D3) don't take this concern into account and need to access dynamic this; they should be used with regular functions only and need self = this trick to access lexical this. A solution like this one can be used to provide an arrow with expected dynamic this as parameter.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Arrow functions *cannot* access lexical `this`. This is just to help future searchers. – NetOperator Wibby Nov 29 '18 at 22:57
  • @NetOperatorWibby A more correct wording is that lexical `this` can be accessed inside arrow functions. It really can. Is it wording that bothered you? – Estus Flask Nov 29 '18 at 23:11
  • I've never seen `this` return anything other than `undefined` inside an error function. – NetOperator Wibby Dec 03 '18 at 07:51
  • I'm no sure what you mean, also there is no mention of error function above. When `this` is accessed inside arrow function, it's retrieved from enclosing lexical context. That's why it's called 'lexical `this`'. In case enclosing context is *global scope* in *strict mode*, `this` will be `undefined`. Otherwise it can be any object. I would suggest to check the reference on this subject, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this – Estus Flask Dec 03 '18 at 11:32