Difference between this ES6 arrow function and regular function? [duplicate]

Answer 1

Lexical this

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

From : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

This is why, when you write:

 this.setState = function() {};
 function(pos) {
    this.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

The this in this.setState inside the function is set to {} (an empty object).

When you write it with the => notation instead, the this is shared with the outside of the function, which is equivalent to :

 this.setState = function() {};
 var self = this;
 function(pos) {
    self.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

or you could also use function(pos){ /* Stuff here */ }.bind(this);

Answer 2

No they are not the same. Arrow functions are automatically bound to the context where they are created. That means that

(x) => this.stuff = x

is (mostly) equivalent to:

(function(x) {
    return this.stuff = x;
}.bind(this))

Arrow functions will also preserve the arguments, super and new.target of the function inside which it is created.

Which means

(function a() {
  const u = () => console.log(arguments);
  u("whatever");
})("a args");

will print something like ["a args"].

See here for more information.