JavaScript this Keyword

In JavaScript, this keyword refers to the current context or scope within which code is executing. Its value is determined by how a function is called, and it can dynamically change depending on the invocation context.

The this keyword refers to different objects depending upon how it is used:

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.

JavaScript this Keyword Examples:

1. 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 behavior, providing a way to access and manipulate its state.

Example: Below is an example of this in Method.

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.

Output

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

Explanation:

We have an object person with properties name and age, and a method greet().
Inside the greet() method, this.name refers to the name property of the person object, and this.age refers to the age property.
When we call person.greet(), this refers to the person object itself. So, this.name and this.age access the name and age properties of the person object, allowing us to log a personalized greeting message to the console.

2. 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
}

Example: Below is an example of this in a function.

Javascript

function greet() {

  console.log('Hello, my name is ' + this.name);
}
 
const person = {

  name: 'John',

  sayHello: greet
};
 
const anotherPerson = {

  name: 'Alice'
};
 
greet(); // Output: Hello, my name is undefined

person.sayHello(); // Output: Hello, my name is John

greet.call(anotherPerson); // Output: Hello, my name is Alice

Output

Hello, my name is undefined
Hello, my name is John
Hello, my name is Alice

Explanation:

When greet() is called directly, this refers to the global object (in non-strict mode), or undefined (in strict mode), since the function is invoked without an explicit context.
When sayHello() is called as a method of the person object, this refers to the person object itself, allowing access to its name property.
The call() method is used to explicitly specify the context for this. When greet.call(anotherPerson) is called, this refers to the anotherPerson object, allowing access to its name property.

3. Using this alone

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.

Example:

Javascript

console.log(this);

Output

{}

Explanation:

In non-strict mode, this refers to the global object (e.g., window in browsers, global in Node.js), representing the global scope.
In strict mode, this is undefined when used alone outside of any function or object context. This behavior prevents accidental use of the global object and encourages safer coding practices.

4. Implicit Binding

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

Example: In this example, we will see the implicit binding of this keyword.

Javascript

const person = {

    name: "ram",

    age: 22,

    greet: function(){

        return `Hello ${this.name}, you are ${this.age} years old`

    }
}
console.log(person.greet());

Output

Hello ram, you are 22 years old

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

5. 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.

Example: In this example, we will see the explicit binding of this keyword.

Javascript

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};
ageVerify.call(per1);
ageVerify.call(per2);

Output

Yes you can drive
No you cannot drive

6. Default Binding

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

Example: This example shows the Default binding.

Javascript

const age = 22;

function verifyAge (){

    return this.age;
}
 
console.log(verifyAge());

Output

undefined

7. 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.

Example: This example shows the arrow function binding.

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

The precedence order of this keyword is:

Supported Browser:

The browser supported are listed below:

We have a complete list of JavaScript reserved words, to learn about them please refer to JavaScript | Reserved Words article.

Article Tags :

JavaScript

Web Technologies

javascript-basics