Could someone explain arrow functions? (ES6)

Question

I'm trying to understand arrow functions at the moment.

I know that with arrow functions the scoping is a bit different. However, I'm still kind of confused on how it all works.

Here's an example that I don't understand all that well.

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

Now, here's that exact same code block but with arrow functions used.

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

Looking at it, it seems to me it's all about the levels. Please correct me if I'm wrong, but with ES5 we would use the .bind() method in this instance because without it, it would return as undefined. I assume this is because in this instance, the this keyword in console.log(this.id); is referring to the counter object and by default, it could not find the id of the obj object.

Kind of confusing but I think that's it. Now, with the arrow functions, I'm not sure why console.log(this.id); would work. Does this mean as long as it's in the same code block, it could be used?

Much appreciation!

*The `this` keyword in `console.log(this.id);` is referring to the counter object* `->` **No**, is referring to `obj`. — Ele, Apr 08 '19 at 21:03
With arrow functions, `this` refers to the context in which the code is _written_ (also known as 'lexical binding'). With es5 functions, `this` refers to the context from which the code is _called_. So in this case where you want `this` to refer to `obj`, you need to call bind. — SoZettaSho, Apr 08 '19 at 21:07
Relevant, if not duplicate: https://stackoverflow.com/q/24900875/497418 — zzzzBov, Apr 08 '19 at 21:12

score 1 · Accepted Answer · answered Apr 08 '19 at 21:08

In the first example if you wouldn't use bind(), then this would refer to the setTimeout callback. Because you used .bind() you changed the this reference to the obj object. That's why you got the 42 as this.id.

In the second example, bind() is not required because arrow function does not have its own this, it's the same as the parent this, so in this case it's pointing to the obj object and that's why you also get 42 as the this.id

score 1 · Answer 2 · answered Apr 08 '19 at 21:09

From docs:

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope they end up finding this from its enclosing scope.

Arrow function is doing exactly what .bind(this) does. Both your examples are equivalent.

score 1 · Answer 3 · answered Apr 08 '19 at 21:23

As everyone says ES6 arrows function don't have a this so they can use the this of their "parent". But there also another différence in ES6 you din't notice: in js objects ,you dont need to use the function word, as follow

// ES6
var obj = {
  id: 42,
  counter() {
    setTimeout(() => {
      console.log(this.id / 7);
    }, 1000);
  }
};

console.log('start')
obj.counter();

Could someone explain arrow functions? (ES6)

3 Answers3