3

I came across this ajax call. It works perfectly fine:

$.ajax({
    url: '/items/' + item.id,
    method: 'PUT',
    data: {item: item},
    success: () => {
        this.updateItems(item); 
    }
});

I did not get what () => means. I used success: function(){ } but then it gives me an error

"updateItems is not a function"

Chris Martin
  • 30,334
  • 10
  • 78
  • 137
user2015
  • 47
  • 4
  • 2
    This is called an "arrow function", a new way to declare functions in es6. [Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is the MDN documentation, and [here](http://stackoverflow.com/documentation/javascript/186/functions#t=201607230227390313154) is the new StackOverflow documentation! – A. Vidor Jul 23 '16 at 02:26
  • 2
    Tha's an ES6 lambda function. The reason you are getting error with a normal function is because in lambdas, 'this' has a different scope. – Vahid Amiri Jul 23 '16 at 02:29
  • Thanks for reply. Still one concern. If its new way to declare function then going forward the old way function(){ } will not work ? – user2015 Jul 23 '16 at 02:32
  • 1
    @user2015 I don't see `function` going out of style any time soon. ;) If you read the answers below, or any of the documentation, you'll realize that these syntaxes are not completely equivalent, anyway. (If they were, you wouldn't receive the error that you do!) – A. Vidor Jul 23 '16 at 02:36
  • @this-vidor - exactly if they are similar then I should not have got an error. By the way I will read all answers to fully understand it. Thanks – user2015 Jul 23 '16 at 02:53

2 Answers2

3

The construct is called an arrow function. It has been introduced with the ES2015 standard and works similar the the function() {} syntax.

For more infos, check the MDN docs.

Note that this syntax is not yet supported by all browsers, especially older versions, so you should look into transpiling it into ES5 compliant JavaScript.

The reason why your attempt to transform it into a classic function() {} fails is that classic functions define their own this value, while arrow functions use the this value of the surrounding function. This is why this.updateItems cannot be found anymore.

To resolve this, bind the function context manually:

$.ajax({
    url: '/items/' + item.id,
    method: 'PUT',
    data: {item: item},
    success: function() {
        this.updateItems(item); 
    }.bind(this)
});
TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
0

It's an Arrow Function, and is like an anonymous function that also binds this. When you switched it to a function(), the this was bound to something else, hence the error.

Edit:

If you still want to use a more traditional syntax, then use:

function(){/*...*/}.bind(this)

Which will ensure you're bound to the correct object.

seairth
  • 1,966
  • 15
  • 22
  • **Explain** the difference! "Something else" is not helpful. – A. Vidor Jul 23 '16 at 02:33
  • @this-vidor I thought I did. The key to his error was the way that binding differed, which I stated. – seairth Jul 23 '16 at 02:36
  • JavaScript is deterministic. "Something else" is a very specific something in this case. What is `this` bound to when using the `function` syntax? Your edit is much more helpful, but still sloppy. – A. Vidor Jul 23 '16 at 02:38
  • @this-vidor no, the point was that it *wasn't* bound to what he was expecting. What it actually *was* bound to makes no difference. – seairth Jul 23 '16 at 02:43
  • It makes sense. Thanks seairth. I am not able to mark this as an answer. – user2015 Jul 23 '16 at 02:54