this Keyword in JavaScript

In this blog, we are going to explain about "this" keyword in Javascript.

Introduction

this keyword refers to the object that the function belongs to or the object that the function is called on. The value of this is dynamic and changes depending on the context in which it is used.

There are four different contexts in which this is used in JavaScript:

1. Global Context

In the global context, this refers to the global object, which is a window in the browser and global in Node.js.

console.log(this);  // logs the windows object in the browser

function test(){
    console.log(this) // logs the windows object in the browser
}

test();

2. Function Context

• In the function context, this refers to the object that the function is called on.
• If the function is not called on an object, this refers to the global object.

const person = {
    name: 'test user',
    sayHi: function(){
        console.log('Hi,my name is '+this.name) // logs: Hi,my name is test user
    }
}

person.sayHi();

const sayHiToUser = person.sayHi;
sayHiToUser();  // logs: Hi,my name is undefined

• In this example, this refers to the person object when the sayHi method is called on the person object. However, when the sayHi method is assigned to the sayHi variable and called, this no longer refers to the person object.
• But instead refers to the global object, which results in undefined being logged to the console.
• To fix this, we can use the bind() method to bind the person object to the sayHi method.

const person = {
    name: 'test user',
    sayHi: function(){
        console.log('Hi,my name is '+this.name) // logs: Hi,my name is test user
    }
}

person.sayHi();

const sayHiToUser = person.sayHi.bind(person);
sayHiToUser();  // logs: Hi,my name is test user

3. Method Context

• In the method context, this refers to the object the method belongs to.
• In this example, this refers to the address object when the getFullAddress method is called on the address object.

const person = {
    name: 'test user',
    sayHi: function(){
        console.log('Hi,my name is '+this.name) 
    },
    address: {
        city: 'Chennai',
        State: 'TN',
        getFullAddress: function(){
            console.log('My address is ' + this.city + ' ,' + this.State)
        },
        getFullAddressWithName: function(){
            console.log('Hi,my name is '+ this.name+ ' And My address is ' + this.city + ' ,' + this.State)
        }
    }
}

person.address.getFullAddress(); // logs: My address is Chennai, TN
person.address.getFullAddressWithName(); // logs: Hi,my name is undefined And My address is Chennai ,TN

4. Constructor Context

• In the constructor context, this refers to the instance of the object being created.

function persons (name,age){
    this.name = name;
    this.age = age;
}

const john = new persons('test user',30);
console.log(john.name);// logs: test user

In the above example, this refers to the instance of the Person object being created when the new keyword is used to create a new instance of the Person object.

Conclusion

• this keyword is an essential tool in JavaScript that allows functions to access the object they belong to and to access the object's properties and methods.
• However, the value of this can be tricky to understand, as it changes depending on the usage.