Search⌘ K
Home
Courses
JavaScript Fundamentals Before Learning React

The 'this' Keyword & Binding in JavaScript

Explore the JavaScript this keyword and how its value depends on the call context. Understand implicit and explicit bindings, new and global bindings, and how arrow functions handle this differently. This lesson helps you grasp key concepts needed for effective JavaScript and React programming.

We'll cover the following...

What is this?

Almost all beginner JavaScript programmers struggle with the this keyword. The good news is that understanding this is actually much easier than it seems. In a nutshell, the value of this depends on what context it is used in. So, if it is used in a function, it’s value will depend on how that function is invoked, i.e., the call site. Let’s go through the ways that this can be assigned in JavaScript.

Implicit Binding

When the dot notation is used to call a function that is in an object or an object of a class, we say that this was bound implicitly. For example, consider the code sample below:

Javascript (babel-node)
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
  getName() {
    return `${this.firstname} ${this.lastname}`;
  }
}
var me = new Developer('Robin', 'Wieruch');
console.log(me.getName()); // 'this' is me
var hobbit = new Developer('Frodo', 'Baggins');
console.log(hobbit.getName()); // 'this' is 'hobbit'

Left of the Dot Rule

Whatever is to the left of the dot is what this is. For example, we call ...