JavaScript and this

JavaScript has been released in 1995, which makes it 24 years old at time of me writing this post. It went from some small, toy language to language used in almost all areas of IT. We are using it in web application, mobile applications, microcontrollers and many others. But there are still some core features in JavaScript that many still struggle with. One of those is what this is, what does this keyword refer to in JavaScript and how it behaves? This is why I will try to explain it in this post.

Introduction

If we would look some other languages like Java, explaining what this is would be much more straight forward. We could say it is just reference to the current object. JavaScript is bit more complex and depends on who is using it where and in which way. I could go into different explanation, how or why. But I do want to keep it simple. What I will do in this post is show couple of examples of different situations that I hope will make everything clearer.

Global scope

First, let’s start with simplest one. What happens if you log this somewhere in global scope? What is it there? In general, it is global context of your environment. In browser, that is window object.

console.log(this); // window object

Functions as object method

In JavaScript, functions have their own scope. Let’s look at next situation. If we would have object containing different properties and some of them being functions accessing this. What is this in that function? Because that function is assigned to this object as its method, this is object method belongs to.

const obj = {
    num: 1,
    whatIsThis: function() {
        console.log(this); // obj {num: 1, whatIsThis: ƒ}
    }
};

obj.whatIsThis();

Global function

Ok, if we have function that belongs to object, this is that object. But what if function doesn’t belong to object but is defined in global scope. Well, it still belongs to some object. Global one. And in case of browser, that is window object.

function globalFunction() {
    console.log(this); // window
}

globalFunction();

Global function as new instance

One thing we can do with JavaScript functions is using keyword new on them. This would treat them as constructor for a new object and return new instance. In that case, if we would output this new instance for this. This is something that has been widely used before ES6 because it gave developers way of more object-oriented way of structuring code.

function FunctionObject() {
    console.log(this); // FunctionObject {}
}

new FunctionObject();

Arrow function as method

Earlier, I said that if function belongs to object, that object will be this of that function. But arrow functions are a bit of special case. If your object has property that is arrow function, and that function tries to access this. It won’t be that object. It will go up. If we have object that is in global scope of browser, this will be window object.

const obj = {
    num: 1,
    whatIsThis: () => {
        console.log(this); // window, not obj
    }
};

obj.whatIsThis();

Conclusion

This has been very short post on some of examples what this is in which case. Today we don’t have many situations where this will be much needed, but before ES6 and classes were introduced, we had to use different tricks to structure our code. Creating new instances out of functions, using keyword this inside of them to expose only some parts and prototype inheritance were those tricks. Also, it is always good to know knowledge because sooner or later, you will end up in situation where you will scratch your head, but hopefully, this post will help you in that moment.

Code examples used in this post can also be found in my GitHub repository.