The "this" keyword in JavaScript

#javascript #beginners #tutorial

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.

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.

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.

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.

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.

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.

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.

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.