Using JavaScript ES6 Arrow Function for callback and binding

With the new project id.webmaker.org that I'm working on for Webmaker.org to implement new login with OAuth2. I got to work with the new ES6 JavaScript syntax and start to liking it a lot because of the flexibility and how easy to do a lot of things that I tend to always have problems with.

One of the most common problem I have is forgetting to bind the this context in the scope I'm working on.

For instance if I'm doing something like:

handleBlur: function(fieldName, value) {  
  var self = this;
  ...
  ...
    this.doSomething(fieldName, value, function(err, json) {
      self.doAnotherthing(function(err, response) {
        ...
        ...
      });
    });
  }
}

Or sometimes you will do something like this

  handleBlur: function(fieldName, value) {
    ...
    ...
      this.doSomething(fieldName, value, function(err, json) {
        this.doAnotherthing(function(err, response) {
          ...
          ...
        }.bind(this));
      }.bind(this));
    }
  }

In ES6 I can simply turn it to be just like this:

  handleBlur: function(fieldName, value) {
    ...
    ...
      this.doSomething(fieldName, value, (err, json) => {
        this.doAnotherthing((err, response) => {
          ...
          ...
        });
      });
    }
  }

Now I have shorthanded version of my callback plus I have my this bind to the scope that I need to work with which is a win-win game for me :)

Don't forget to leave a comment if you have any suggestion.