Why doesn't arrow functions work correctly with "this"?

Hello Andrew,

I too thought arrow functions were shorthand for function() {} when I was first introduced to them. But as it turns out, they do add some special functionality. Specifically when it comes to "this."

This is a relatively big topic, so I won't go into crazy depth here. However I'll provide some additional resources that will hopefully get you on the right path.

First of all, your code. Try removing the arrow function from:

countWords: () => {
    return this.string.split(" ").length;
  }

so it looks like this:

countWords: function() {
    return this.string.split(" ").length;
  }

So the question is, why does "this" return return an empty object instead of the myString object?

The short answer is that since you're using an arrow function, "this" is bound to the countWords function/method instead of the myObject object.

This is the first article I'd suggestion reading. Specifically the Main benefit: No binding of ‘this’ section towards the bottom of the article. Here's an excerpt:

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions however, this is lexically bound. It means that it uses this from the code that contains the arrow > function.

"this" is a very confusing and misunderstood aspect of JavaScript. If you want to go deeper into how it works, Kyle Simpson has written a book (available for free on GitHub) that goes deep into how "this" works.

There are four rules to determine the context of "this":

1. Is the function called with new (new binding)? If so, this is the newly constructed object.
2. Is the function called with call or apply (explicit binding), even hidden inside a bind hard binding? If so, this is the explicitly specified object.
3. Is the function called with a context (implicit binding), otherwise known as an owning or containing object? If so, this is that context object.
4. Otherwise, default the this (default binding). If in strict mode, pick undefined, otherwise pick the global object.

Treehouse also has a workshop on arrow functions that I'd recommend checking out if you haven't already done so.

I hope this helps! If you have any additional questions, please let me/us know!

Have a great weekend, Brandon