JavaScript and this
Tags: frontenddev, programming, javascript, webdev
Published: 2020-03-18 12:07:16

---
title: JavaScript and this
published: true
date: 2020-03-18 11:01:01 UTC
tags: front-end-developmen,programming,javascript,web-development
canonical_url: 
---

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.

![](https://cdn-images-1.medium.com/max/700/1*EcCYU0s36K1UBFokEvzHaw.jpeg)

**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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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](https://github.com/kristijan-pajtasev/javascript-and-this).