Explaining JavaScript’s ‘this’ Keyword in Simple Terms

In JavaScript, you must have used the ‘this’ keyword before. The ‘this’ keyword could mean different things in JavaScript depending on where you call it. The purpose of this article is to show you an easy way to identify what this would refer to in a particular scenario.

What is ‘this’ anyway?

‘this’ can be confusing (Photo by sydney Rae on Unsplash)

In JavaScript, the ‘this’ keyword refers to the object that controls/runs a particular set of code within a scope(The technical term used commonly is execution context). ‘this’ is bound to the owner. Simply said, ‘this’ refers to the object it belongs to. Thus, we know that it could refer to different objects in different contexts. Let’s take a look at these simple questions to identify what object it refers to:

1. Is ‘this’ being used in Node.js or client-side JavaScript? (In Node, this in global context refers to ‘globalThis’ whereas in a browser it refers to ‘window’ objects)
2. Ask who is the owner of the block of code where you refer ‘this’? (Note that whenever this is called within a function, figure out who owns the function. That is the true reference of this in that case.)
3. Is it bounded to a function explicitly? (Using method like call() and apply(). In both of these cases, the object passed in these functions become the reference of ‘this’. We will take a look at it briefly later.)

Lets understand this by looking at different scenarios:

1) this on its own

When called alone, it refers to the global object.

Take a look at the example below:

console.log(this); // This will print window object

Let’s answer our questions to conclude what this refers to in the above code example:

• We are using vanilla JavaScript in this case, this should refer to the window object.
• We see that there is no class or method that owns this object. So it will go for the widest global scope there is, which is window object.
• There is no explicit function binding.

Hence we can conclude this here refers to window.

NOTE: In the above example, even if we write the console statement within a function, we will get the same result. This is because the function is owned by global window.

2) this within a Function

As we learned before, if this is called within a function, we need to see who owns the function to deduce the reference of this object.

Take a look at the example below:

function calculateTaxes(){
  console.log(this); // This will return window
}

Let’s answer our questions to conclude what this refers to in the above code example:

• We are using Vanilla JavaScript so the global reference of the object is window.
• Here the function is owned by the window object.
• The function is not explicitly bound.

Hence, we can conclude that ‘this’ here refers to the window object.

Let’s take a look at another example:

"use strict"
function calculateTaxes(){
  console.log(this); // This will return window
}

Remember that ‘this’ object is bound to the owner. If we use strict mode in JavaScript, it prevents default binding(Our default binding in this case is global object window). Hence, in this particular case, ‘this’ is undefined, making it an exceptional case.

3) this within a Class

Within a class, it refers to an object of that class. Thus you can access all its properties and methods.

Take a look at the example below:

class Animals{
 var name = 'Dog';
 var species;
 
 function sound(){
   // Identify what sound that animal makes and return value
 }
 console.log(this.name); // This will print Dog
}

Let’s answer our questions to conclude what this refers to in the above code example:

• We are using vanilla JavaScript in this case. So global context would be the window object.
• However, here we see the owner of the code block, where ‘this’ is called, is the class Animals.
• There is no explicit function binding.

Hence, we can conclude ‘this’ here refers to the object of the Animals class.

NOTE: If we write the console statement within sound function. We will get the same result. Hence, this.sound() is also valid. Since, sound function is owned by the class Animals, the class is still the owner of ‘this’.

4) this with Explicit Function Binding

‘this’ can be used with call() and apply() functions. Both of these are inbuilt JavaScript functions. They serve the same purpose but differ in the way their parameters are passed(Call method takes each parameter individually and Apply takes them as an array).

Both these functions essentially call a function with a given ‘this’ object and different arguments. Meaning, we can specify what ‘this’ object we want to pass. Let’s look at an example:

var mansBestFriend = {
 species: "Dog",
 name: "Scotty"
}
var introduceAnimal = function(food){
  console.log("This is " + this.name + ".");
  console.log("This " + this.species + " loves " + food + ".");
}
// This is Scotty. This Dog loves Steak.
introduceAnimal.call(mansBestFriend, 'Steak');
introduceAnimal.apply(mansBestFriend, ['Steak']);

As we learned, the first parameter for call and apply functions is a ‘this’ object. Here we specify explicitly, that object is mansBestFriend.

Let’s answer our questions to conclude what this refers to in the above code example:

• We are using vanilla JavaScript in this case. So global context would be the window object.
• It is called within a function, so by itself, this would refer to the window object since the function is owned by the window.
• However, we bind the ‘this’ object explicitly using call/apply methods. This means, we need to look at what object is passed to these functions to conclude what ‘this’ refers to here. Since mansBestFriend object is passed to call and apply, ‘this’ here refers to mansBestFriend object.

You can learn more about call and apply in this wonderful article by Omer Goldberg.

Using this simple technique you can easily identify what ‘this’ refers to in a particular execution context.

Identify the owner of the object, understand the exception and look for explicit binding, if any. You are now ready to use ‘this’ in JavaScript like a pro.

Thank you for reading my article!

My name is Vishnu Sasidharan and I write technical articles, code and tell stories. My goal is to reduce complex concepts into something simple and explain it in layman’s terms. I also share real-life stories that have inspired me.

If you liked this article you may also like:

Why You Should Stop Using Loops

Promises in TypeScript

More content at plainenglish.io