JavaScript this Keyword

In JavaScript, this refers to the object that calls the function, and its value is determined at runtime based on how the function is invoked.

• this dynamically refers to the calling object, not where the function is defined
• It is used to access an object’s properties and methods
• Enables flexible, reusable, and context-aware code

const person = {
    name: "GeeksforGeeks",
    greet() {
        return `Welcome To, ${this.name}`;
    }
};
console.log(person.greet()); 

Applications of this in JavaScript

The this keyword in JavaScript dynamically refers to the object that is executing the current function. Its value changes based on how and where it is used, not where it is written.

Using this in a Method

In an object method, the this keyword refers to the object itself, allowing the method to access, interact with, and modify the object’s properties and behavior within its scope.

• Refers to the object that owns the method.
• Used to access and manipulate object properties.
• Enables interaction with the object’s internal state.

const person = {
    name: 'John',
    age: 30,
    greet() {
        console.log('Hello, my name is ' +
            this.name + ' and I am '
            + this.age +
            ' years old.');
    }
};

person.greet(); 

Using this in a Function

In a JavaScript function, the behavior of the this keyword varies depending on how the function is invoked.

Syntax:

function exampleFunction() {  console.log(this); // Refers to the current execution context}

function greet() {
    console.log('Hello, my name is ' + this.name);
}

const person = {
    name: 'Amit',
    sayHello: greet
};
const anotherPerson = {
    name: 'Jatin'
};


//Driver Code Starts
greet(); 
person.sayHello(); 
greet.call(anotherPerson); 
//Driver Code Ends

Using this alone(Global Context)

When used alone in JavaScript, outside of any specific context, the behavior of the this keyword depends on whether the code is running in strict mode or not.

console.log(this);

Implicit Binding

When we call a function as a method of the object this keyword refers to the calling object.

const person = {
    name: "Ram",
    age: 22,
    greet: function () {
        return `Hello ${this.name}, you are ${this.age} years old`
    }
}
console.log(person.greet());

Here this keyword is referring to the person object so it can access name and age values.

Explicit Binding

When we explicitly bind this keyword using the call(), bind(), or apply() method then this keyword default reference is changed to the object called using the above-specified methods.

//Driver Code Starts
function ageVerify() {
    if (this.age > 18) {
        console.log("Yes you can drive");
    } else {
        console.log("No you cannot drive");
    }
}

const per1 = { age: 21 };
const per2 = { age: 16 };
//Driver Code Ends

ageVerify.call(per1);
ageVerify.call(per2);

Default Binding

When this keyword is used in global scope this is set to window object.

const age = 22;
function verifyAge (){
    return this.age;
}
console.log(verifyAge());

Arrow Function Binding

When this is used in the arrow function then this has lexical scope so without the function keyword this is unable to refer to the object in the outer scope. 

const person = {
    name: "ram",
    age: 22,
    greet : () =>{
        return `Hello , you are ${this.age} years old`
    }
}
console.log(person.greet());

Returns after using this keyword

• In object methods, this refers to the object itself, while in events it points to the element that triggered the event.
• When used alone or inside a regular function, this usually refers to the global object.
• In strict mode, this inside a function becomes undefined.
• The value of this can be explicitly changed using call(), apply(), or bind().

Precedence order of this keyword

The precedence of the this keyword in JavaScript follows a clear order: bind() has the highest priority, followed by call() and apply(), then object method invocation, and finally the global scope.

• JavaScript bind() Method:the bind() method permanently fixes the value of this to a specific object for a function,
• JavaScript call() and apply() Method:call() and apply() methods invoke a function immediately while explicitly assigning this to a chosen object.
• JavaScript Object Method: When a function is called as an object’s method,this refers to that object.
• JavaScript Global Scope:In the JavaScript global scope, when no specific execution context is provided, the this keyword refers to the global object (such as window in browsers), but in strict mode, it becomes undefined.