What does Arrow function do: ECMAScript 6

Question

Here is an example:

onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
};

Is this any different from

onChange(e, {newValue}) {
  this.setState({
     value: newValue
  });
}

Thanks!

check the use of arrow function: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions — Mayank Shukla, Jun 21 '17 at 06:28
*What does arrow function do* It does what the documentation says it does. — , Jun 21 '17 at 06:36

score 1 · Accepted Answer · answered Jun 21 '17 at 06:29

1

Yes, there is:

onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
};

will retrieve this from the outer scope of the function, so it would refer to the this of the place where it was defined at.

onChange(e, {newValue}) {
  this.setState({
     value: newValue
  });
}

On this, this will refer to the this that the function is called with, so this would not refer to the this from where it was called from but from the object it is binded to.

For more information check Arrow Functions (MDN)

answered Jun 21 '17 at 06:29

GGG

640
1
9
27

Please close duplicates as duplicates instead of answering. – Jun 21 '17 at 06:38
@torazaburo I do not have enough reputation to close questions and thought it would be more useful to give an actual answer instead of leaving the other incomplete and confusing answer as the only one. – GGG Jun 21 '17 at 06:48
From https://stackoverflow.com/help/privileges/close-questions: *If you don't have enough reputation to cast close votes, or have used up your close votes for the day, there are alternatives: If the question is a duplicate, post a comment with a link to the original.* – Jun 21 '17 at 07:02
@torazaburo Then what would you like me to do? Delete my answer? I just did my job of answering questions I can answer and not leaving wrong/unclear answers such as the below one. I know I'm wrong but I think it's also wrong leaving the other answer to this question here as the sole answer for those who won't follow the link to the original question. – GGG Jun 21 '17 at 07:05
Just a note for future reference. – Jun 21 '17 at 07:06

score 0 · Answer 2 · answered Jun 21 '17 at 06:27

0

The arrow function version binds to the this context - probably what you want for an event callback.

answered Jun 21 '17 at 06:27

Grandas

519
1
5
13

What does Arrow function do: ECMAScript 6

2 Answers2