The "this" keyword in JavaScript
Tags: javascript, beginners, tutorial
Published: 2020-10-31 13:40:59

The `this` keyword in JavaScript causes confusion amount beginner and experienced developers. I will try my best to shed light on the subject since the `this` keyword is used quite often. 

**What is the this keyword?**
In simple terms, the `this` keyword points to the object we are currently in. 

If we console.log(this) inside the console you will notice the `this` keyword returns the window object. 
```javascript
console.log(this) // window object
```

Now let us see what happens if we stick the `this` key work inside of a function. It still points to the window object. This should make sense since we are still inside the window object.
```javascript
function a(){
  console.log(this);
}

a();
```

Another way of trying to figure out what this is referring to is the object you are calling a function on. If we call the a function again but now we write it using the window object you will see that the `this` keyword still points to the window.
```javascript
function a(){
  console.log(this);
}

window.a();
```


**Identifying what object the this keyword is pointing to**
Regular functions as mention above the `this` keyword will point to the window object.

The `this` keyword inside a method will point to the object that holds that method.
```javascript
let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const currentYear = new Date().getFullYear();
        console.log(this) //REFERING TO THE THIS IN HERE
        return currentYear - this.yearBorn;
    }
}

martin.age(); // {fullname: "Juan Martin Restrepo", yearBorn: 1990, age: ƒ} which is the martin object;
```

The `this` keyword in classes will point to instances of the class(objects) when inside instance methods. When the method `juan.yearborn()` is called the `this` keyword points to the juan object. If the `this` key work is inside a class method(the method starts with static keyword) it will point to the class. When the method `Person.increasePersonCounter()` is called the `this` keyword points to the class. 

```javascript
class Person{
    constructor(name, age){
        this.name = name; 
        this.age = age; 
    }

    static numberOfPersonMade = 0; 

    yearBorn(){
        const currentYear =  new Date().getFullYear();
        console.log(this); //REFERING TO THE THIS IN HERE
        return currentYear - this.age; 
    }

    static increasePersonCounter(){
        console.log(this); //REFERING TO THE THIS IN HERE
        this.numberOfPersonMade++; 
        return this.numberOfPersonMade;
    }
}

let juan = new Person("Juan Martin Restrepo", 30); 
 
juan.yearBorn(); 

Person.increasePersonCounter();
```
Now let’s see what will happen if we have a method that contains a function. What do you think the `this` keyword will be pointing to? A good assumption is since we are inside of a method the `this` keyword will be pointing to the object that contains the method. The `this` keyword actually points to the window object.

Developers in the JavaScript community will have different opinions regarding if this is correct or not. The rule is if the `this` keyword is inside of a function it will always point to the window object. The `console.log()` inside of the introduce function will return `My name is undefined and I am undefined years old!`. The reason why `this.fullname`  inside the template literal is returning undefined is that is calling `window.fullname`. That property does not exist in the window object.

```javascript
let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const currentYear = new Date().getFullYear();
        function introduce(){
            //REFERING TO THE THIS IN HERE
            console.log(`My name is ${this.fullname}`)
        }

        introduce(); 
        
        return currentYear - this.yearBorn;
    }
}

martin.age(); //My name is undefined
```
We could also solve this issue by creating a self variable that holds the value of this while we are still inside the method and not inside the function. 

```JavaScript
let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const self = this // this is pointing to the martin object. 
        const currentYear = new Date().getFullYear();
        function introduce(){
            console.log(`My name is ${self.fullname}`)
        }

        introduce(); 
        
        return currentYear - self.yearBorn;
    }
}
martin.age();
```
The self variable is pointing to the martin object so we can now call `self.fullname` and get the property from the martin object. 

I hope that this is clearer in your mind after reading this blog. There are also methods that can be used to manually assign the `this` keyword. This will be cover in the next blog.