The Secret of the “this” Keyword in JavaScript | This Keyword Explained

The this keyword is a peculiar one, and one that confuses a lot of developer.

This lesson is also available on YouTube:

Photo by Seb Mooze on Unsplash

In summary, the this keyword represents the calling context. And what do I mean by that? It means the calling context is object that calls the function. Let's look at a few examples. I promise you it will be crystal clear after reading this article.

Examples

Scenario 1: The this keyword in an object's method.

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        console.log(this);
    }
}
car.drive(); // expect the car object.

Our car object here has a drive method. All it does is to print out this.

Now we are calling the drive function from car. That means, our calling context is car. In other words, the this keyword when we run drive() will be referring to car.

Scenario 2: The this keyword in a normal function call.

What about calling a function without any context?

function heya(){
    console.log(this); // expect the 'window' object
}
heya();

Here, we are calling heya() on its own. If this happens, by default, JavaScript will set the context as the global context, ie the window object. So, this will be the global window object.

Scenario 3: The this keyword in an inner function.

Let’s modify our car object for a bit.

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        function inner(){
            console.log(this);
        }
        inner();
    }
}
car.drive(); // expect the 'window' object

Now you might be wondering why are we seeing the ‘window’ object?? Similar to scenario 2, we are calling the inner() function on its own. Hence, JavaScript is setting the context as the global context, and we see this as the global window object.

Scenario 4: Extracting an object’s method

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        console.log(this);
    }
}
const boom = car.drive;
boom(); // expect the 'window' object

Ok calm down. Now, in this scenario, we are reassigning the drive property to a new variable boom. Then we call boom on its own. Similar to Scenario 2 and 3, JavaScript will set the context as global. Therefore we see the window object.

In summary:

Here is some quick tips to quickly find out what the this keyword is referring to:

1. Ask yourself, what is calling the function.
2. If the function is called by an object, then the this keyword will refer to the object.
3. If we call the function on its own, JavaScript will set the context as the global context, which in the browser, it is the window object.

Binding context.

Sometimes it might be useful to manually define the context of a function call. JavaScript allows us to do so by using the bind() method on a function. Here is an example:

const fruit = {
    name: "apple",
    colour: "red",
}
const heya = function(){
    console.log(this);
}
const bound = heya.bind(fruit);
bound(); // expect 'fruit' object

The bind method will return us a modified version of the original function, where the context has been manually set to some predefined value. Here, we are binding the context of heya to fruit. So, when we run bound(), the this keyword will be referring to fruit.

There is no restriction on what we can bind to a function. We can bind any data type, either a string, number, array, object or boolean.

// ...
const bound2 = heya.bind("abc");
bound2();  // expect the string "abc"