Arrow Functions + This keyword

Technical blog post number trois, coming at ya!

At the end of my last post about arrow functions, I briefly teased that the arrow function has a special relationship with the JavaScript keyword, this. There's so much to learn about this (Google spit out over 309,000 hits on the topic!), but here is what I've learned so far about it in regards to the lovely fat arrow.

(Sidenote: As evidenced by some mildly-heated debate in my last post's discussion section, the arrow function goes by many names! I even just saw it referred to as the hash rocket, which is a term dubbed by Ruby enthusiasts. And I've gotta say, that may be my favorite term dubbed by anyone for anything.)

From what I've seen, this has as almost many haters as it has super fans. It can be confusing and seemingly unreliable to use in all classic function expressions because this relies on the context of its environment in which its called, e.g., if this lies within a function within a method, this will refer to the global scope and not the method.

Enter... THE ARROW FUNCTION!

As you can see in my example code below, this unfortunately does not work the way I intend it. The alerts that pop up show "loves to bite", "loves to scratch", and "loves to destroy" without including the cat's awesome name, Dragon. This fails to refer to the object but refers to the global scope since it is within a function. I've seen this failure referred to as a "JavaScript quirk," which can be considered an understatement by some. :)

//Trying to use 'this' without an arrow function

let cat = {
  name: 'Dragon',
  favThings: ['bite', 'scratch', 'destroy'],
  showFavThings: function() {
    this.favThings.forEach(function(fav) {
      alert(this.name + " loves to " + fav + "!");
    });
  }
};

cat.showFavThings();
//output does not include cat name, boooo!

But our friend, The Arrow Function (which was developed for JavaScript ES6 in part due to the aforementioned "quirk"), comes to the rescue here because this is lexically-bound to arrow functions, meaning that this will refer to whatever code the arrow function is in before it.

//this with arrow function

let cat = {
  name: 'Dragon',
  favThings: ['bite', 'scratch', 'destroy'],
  showFavThings () {
    this.favThings.forEach((fav) => {
      alert(this.name + " loves to " + fav + "!");
    });
  }
};

cat.showFavThings();
//Dragon loves to bite!
//Dragon loves to scratch!
//Dragon loves to destroy!

Good job, Dragon! You do you!

As a novice coder, I'm still learning how to best use Arrow Functions as not all situations call for them. But what about you? Why do you like or dislike this method?