Understanding the 'this' Keyword in JavaScript

The this keyword in JavaScript refers to the owner of a function. You can also see it as the object that a function is contained in. Where that function is declared determines what this means. This blog post is going to look at what this means and how its meaning changes depending on where it is used.

Let's get started.

Global Variables

Variables declared in global scope belong to the window object. We can see this with the following code:

let width = this.innerWidth;
let height = this.innerHeight;

console.log(`${width}px wide, ${height}px high`);

Note: The syntax used in the console.log() function is what's known as Template Literals, and you can read more about this here.

Copy the above code into your browser console and see what happens. You should get an output of something like 1500px wide, 1505px high, although the exact values will depend on the dimensions of your device.

Looking at the variables we created, we assigned the width variable a value of this.innerWidth, and the height variable a value of this.innerHeight. We've already established that a variable declared in global scope is owned by the window object, so we could equally have written the following:

let width = window.innerWidth;
let height = window.innerHeight;

This would result in the exact same output. Now, what about functions?

Global Functions

Like global variables, global functions belong to the window object as well, so when we put the code from the first example into a function, we get the same output.

function deviceDimensions(){
  let width = this.innerWidth;
  let height = this.innerHeight;
  console.log(`${width}px wide, ${height}px high`);
}

deviceDimensions();

In this case, this still points to the window object because that is the object that the function is contained within. But what happens when we have a function that is being used a method of an object?

Functions Within Objects (Methods)

When a function is declared inside an object, it is called a method of that object. Recall thatthis refers to the object the function is contained within. With that in mind, what do you think this points to in the below code?

var vehicle = {
  type: 'car',
  wheels: 4,
  getType: function(){
    console.log(this.type);
  }
}

vehicle.getType();

Here we can see that getType() is a method of the vehicle object. Inside the getType() function this refers to the object that contains it, which in this case is the vehicle object. The above code would output car to the console. It's worth noting that we could equally have written console.log(vehicle.type) and received the same output. If we were to create more instances of the vehicle object, each with different type and wheels properties, this is useful for pointing to the specific instance of that vehicle object.

jacobcollinsdev

jacobcollinsdev

Understanding the 'this' Keyword in JavaScript

Global Variables

Global Functions

Functions Within Objects (Methods)

Further Reading