Search⌘ K
Home
Courses
Step Up Your JS: A Comprehensive Guide to Intermediate JavaScript

Arrow Functions and `this`

Explore how arrow functions differ from traditional JavaScript functions in handling the this keyword. Understand the six rules of this binding and how arrow functions inherit this from their surrounding scope, enabling you to write clearer and more reliable object-oriented code.

We'll cover the following...

Arrow functions and this

Arrow functions don’t follow any of the traditional rules of this-binding.

Instead, arrow functions get their this binding from their scope. We’ve discussed five rules to this-binding. We can now add a 6th. Here they all are.

Rules

1 - If the new keyword is used when calling the function, this inside the function is a brand new object.

Javascript (babel-node)
function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}
new ConstructorExample();
// -> ConstructorExample {}
// -> ConstructorExample { value: 10 }

2 - If apply, call, or bind are used to call a function, ...