This post (This binding in JavaScript – 5. Arrow functions) was originally published onSargalias.

In this series we talk aboutthis binding in JavaScript.

This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.

Basically in JavaScript there are 4 modes forthis binding. Make that 5 if we include arrow functions.

In order of lowest priority to highest priority, here they are:

1. Default binding
2. Implicit binding
3. Explicit binding
4. New binding
5. Arrow functions
6. Gotchas and final notes

In this post we'll talk about arrow functions.

How arrow functions work with this binding

Remember the old trick usingself to makethis use lexical scope?

Arrow functions basically do exactly that without needing the separate variableself.

It works this way because arrow functions don't bind the value ofthis, so they just use lexical scope.

The value ofthis remains whatever it was at the time when the arrow function was defined.

Examples

Here are some examples and use cases.

Example of arrow function and window object

Consider the following code.

'use strict';constobj={foo:()=>console.log(this),};obj.foo();

What will the code above output?

Answer:undefined

Explanation:

If we writeconsole.log(this) at the global level,this iswindow orundefined depending on if we're using strict mode.undefined in this case.

So in the surrounding codethis isundefined.

Arrow functions take the value ofthis as it is in the surrounding code.

Thereforethis is undefined in this case.

In comparison, if we were using a normal function, the callobj.foo would assignthis toobj inside the function. In that case the code would outputobj. However with arrow functions we don't get that binding.

Example of arrow function defined in function

Consider the following code.

It's a bit tricky.

functionPerson(){constfoo=()=>console.log(this);this.foo=foo;}constperson=newPerson();person.foo();

What does the code above output?

Answer:person

Explanation:

The arrow function doesn't bindthis, instead it picks up the value ofthis from what it was when the arrow function was defined.

Here's what happens in the code above:

1. We callnew Person(). This creates a new empty object and binds it as the value ofthis.
2. Inside thePerson constructor, we define an arrow function. The arrow function body has the codeconsole.log(this). The value ofthis is the same as whatever it is in the surrounding code. From step 1,this is currently the object thatnew created.

Example of trying to overwrite this in arrow function by using default binding

Arrow functions ignore default, implicit and explicit binding. So even if we try to use something like default binding,this won't be affected.

'use strict';functionPerson(){constfoo=()=>console.log(this);this.foo=foo;}constperson=newPerson();constplainFoo=person.foo;plainFoo();// still logs person to the console, not window or undefined

Comparison to using a self variable

How arrow functions behave withthis is exactly the same as if we used a separate variableself.

For example:

'use strict';functionPerson(){constself=this;functionfoo(){console.log(self);}this.foo=foo;}constperson=newPerson();constplainFoo=person.foo;plainFoo();// still logs person to the console, not window or undefined

The code above has the same effect as defining an arrow function and usingthis directly. Just like we useself to capturethis in lexical scope, we use arrow functions to capturethis in lexical scope without the use of another variable.