JavaScript this Keyword (original) (raw)

Last Updated : 18 Jan, 2025

The '**this keyword' in JavaScript refers to the object to which it belongs. Its value is determined by how a function is called, making it a dynamic reference. The 'this' keyword is a powerful and fundamental concept used to access properties and methods of an object, allowing for more flexible and reusable code.

JavaScript ``

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

Output

Welcome To, GeeksforGeeks

There are more ways to use this keyword in JavaScript:

**Using this in a Method

In the context of an object method in JavaScript, the this keyword refers to the object itself, allowing access to its properties and methods within the method's scope. It facilitates interaction with the object's data and behaviour, providing a way to access and manipulate its state.

JavaScript `

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

person.greet();

Output

Hello, my name is John and I am 30 years old.

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

JavaScript `

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

Output

Hello, my name is undefined Hello, my name is Amit Hello, my name is Jatin

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.

JavaScript `

console.log(this);

**Implicit Binding

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

JavaScript ``

const person = { name: "Ram", age: 22, greet: function () { return Hello <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>t</mi><mi>h</mi><mi>i</mi><mi>s</mi><mi mathvariant="normal">.</mi><mi>n</mi><mi>a</mi><mi>m</mi><mi>e</mi></mrow><mo separator="true">,</mo><mi>y</mi><mi>o</mi><mi>u</mi><mi>a</mi><mi>r</mi><mi>e</mi></mrow><annotation encoding="application/x-tex">{this.name}, you are </annotation></semantics></math>this.name,youare{this.age} years old } } console.log(person.greet());

Output

Hello Ram, you are 22 years old

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.

JavaScript `

//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);

Output

Yes you can drive No you cannot drive

**Default Binding

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

JavaScript `

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.

JavaScript ``

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

Output

Hello , you are undefined years old

Returns after using this keyword

When used within a method of an object, this points to that object.
When used by itself, this points to the global object.
Within a function, this typically points to the global object.
In a function under strict mode, this becomes undefined.
During an event, this points to the element that triggered the event.
Methods such as call(), apply(), and bind() can reassign this to any desired object.

The precedence order of **this keyword

The this keyword in JavaScript dynamically refers to the object executing a function or method. Its context varies: in methods, it points to the object itself; in the global scope, to the global object (like window); in strict mode, to undefined; and can be reassigned with call(), apply(), or bind().