Learn ES6 The Dope Way Part II: Arrow functions and the ‘this’ keyword

Mariya Diminsky
We’ve moved to freeCodeCamp.org/news
4 min readMay 16, 2016

--

Welcome to Part II of Learn ES6 The Dope Way, a series created to help you easily understand ES6 (ECMAScript 6)!

So, what the heck is => ?

You’ve probably seen these strange Egyptian-looking hieroglyphics symbols here and there, especially in someone else’s code, where you’re currently debugging a ‘this’ keyword issue. After an hour of tinkering, you’re now roaming the Google search bar and stalking Stack Overflow. Sound familiar?

Together, let’s cover three topics in Learn ES6 The Dope Way Part II:

  • How the ‘this’ keyword relates to =>.
  • How to migrate functions from ES5 to ES6.
  • Important quirks to be aware of when using =>.

Arrow Functions

Arrow functions were created to simplify function scope and make using the ‘this’ keyword much more straightforward. They utilize the => syntax, which looks like an arrow. Even though I don’t think it needs to go on a diet, people call it “the fat arrow” (and Ruby enthusiasts may know it better as the “hash rocket” ) — something to be aware of.

How the ‘this’ keyword relates to Arrow Functions

Before we dive deeper into ES6 arrow functions, it’s important to first have a clear picture of what ‘this’ binds to in ES5 code.

If the ‘this’ keyword were inside an object’s method (a function that belongs to an object), what would it refer to?

Correct! It would refer to the object. We’ll get to why later on.

Now what about if the ‘this’ keyword were inside of method’s function?

What did you get? Wait, what happened to our bunny…?

Ah, did you think ‘this’ refers to the method’s inner function?

Perhaps the object itself?

You are wise to think so, yet it is not so. Allow me to teach you what the coding elders had once taught me:

Coding Elder:Ah yes, the code is strong with this one. It is indeed practical to think that the ‘this’ keyword binds to the function but the truth is, ‘this’ has now fallen out of scope…It now belongs to…”, he pauses as if experiencing inner turmoil, “the window object.

That’s right. That’s exactly how it happened.

Why does ‘this’ bind to the window object? Because ‘this’, always references the owner of the function it is in, for this case — since it is now out of scope — the window/global object.

When it is inside of an object’s method — the function’s owner is the object. Thus the ‘this’ keyword is bound to the object. Yet when it is inside of a function, either stand alone or within another method, it will always refer to the window/global object.

But why…?

This is known as a JavaScript quirk, meaning something that just happens within JavaScript that isn’t exactly straightforward and it doesn’t work the way you would think. This was also regarded by developers as a poor design choice, which they are now remedying with ES6's arrow functions.

Before we continue, it’s important to be aware of two clever ways programmers solve the ‘this’ problem within ES5 code, especially since you will continue to run into ES5 for awhile (not every browser has fully migrated to ES6 yet):

#1 Create a variable outside of the method’s inner function. Now the ‘forEach’ method gains access to ‘this’ and thus the object’s properties and their values. This is because ‘this’ is being stored in a variable while it is still within the scope of the object’s direct method ‘showTasks’.

#2 Use bind to attach the ‘this’ keyword that refers to the method to the method’s inner function.

And now introducing…Arrow functions! Dealing with ‘this’ issue has never been easier and more straightforward! The simple ES6 solution:

While in ES5 ‘this’ referred to the parent of the function, in ES6, arrow functions use lexical scoping — ‘this’ refers to it’s current surrounding scope and no further. Thus the inner function knew to bind to the inner function only, and not to the object’s method or the object itself.

How to migrate functions from ES5 to ES6.

You did it! Great job! Simple enough right? Here are a few more examples utilizing the fat — er skinny arrow, to get your eyes accustomed:

Important quirks to be aware of when using Arrow functions

If you use the ‘new’ keyword with => functions it will throw an error. Arrow functions can’t be used as a constructor — normal functions support the ‘new’ via the property prototype and internal method [[Construct]]. Arrow functions don’t use neither, thus the new (() => {}) throws an error.

Further quirks to consider:

Congrats! You’ve made it through Learn ES6 The Dope Way Part II and now you have a basis for arrow function knowledge, the lexical benefits it gives to ‘this’ and also snagged yourself some JavaScript quirk skills! :)

Keep your wisdom updated by liking and following as more Learn ES6 The Dope Way is coming soon to Medium!

Part I: const, let & var

Part II: (Arrow) => functions and ‘this’ keyword;

Part III: Template Literals, Spread Operators & Generators!

Part IV: Default Parameters, Destructuring Assignment, and a new ES6 method!

Part V: Classes, Transpiling ES6 Code & More Resources!

You can also find me on github ❤ https://github.com/Mashadim

--

--