JavaScript This Keyword

The thisis executed. It allows access to the object that is currently executing the function, providing a way to refer to its properties and methods. Let's explore the various aspects of the this keyword with code examples:

Global Context

In the global context, thisrefers to the global object, which is windowin a web browser environment and globalin Node.js.

console.log(this === window);// Output: true

function showThis(){ 
  console.log(this === window);// Output: true
}
              
showThis();

In the above example, thisinside the function showThis()refers to the global object ( windowin a browser environment).

Example

console.log(this === window);// Output: true

function showThis(){ 
  console.log(this === window);// Output: true
}
              
showThis();

Object Context

When a function is called as a method of an object, thisrefers to the object itself.

const person = {
  user:"Musa",
  great:function(){ 
    console.log("Hello, " + this.user + " !");
  }
};

person.great();// Output: "Hello, Musa!"

In the above example, thisinside the great()method refers to the personobject, allowing access to its name property.

Example

const person = {
  user:"Musa",
  great:function(){ 
    console.log("Hello, " + this.user + " !");
  }
};

person.great();// Output: "Hello, Musa!"

Constructor Context

In constructor functions, thisrefers to the newly created instance of the object.

function Person(user) {
  this.user = user,
  this.great =  function() {
    console.log("Hello, " + this.user + " !");
  };
}

const john = new Person("John")
john.great(); // Output: "Hello, John!"

Inside the Personconstructor function, thisefers to the instance of Personbeing created ( johnin this case).

Example

function Person(user) {
  this.user = user,
  this.great =  function() {
    console.log("Hello, " + this.user + " !");
  };
}

const john = new Person("John")
john.great(); // Output: "Hello, John!"

Event Handlers

In event handler functions, thistypically refers to the DOM element that triggered the event.

<button onclick="console.log(this)">Click me</button>

In this example, clicking the button will log the button element itself, as thisrefers to the button element within the onclickevent handler.

Arrow Functions

Arrow functions do not have their own thiscontext. Instead, they inherit the thisvalue from the surrounding lexical scope.

const obj = {
  user: "Bilal",
  great: function() {
    ["Hi", "Hello", "Hey"].forEach((greeting) => {
      console.log("Hello, " + this.user + " !");
    });
  };
}

obj.great(); // Output: "Hello Bilal !"

In this example, the arrow function inside the setTimeoutcallback retains the thisvalue from the great()method, allowing access to the userproperty of the objobject.

Example

const obj = {
  user: "Bilal",
  great: function() {
    ["Hi", "Hello", "Hey"].forEach((greeting) => {
      console.log("Hello, " + this.user + " !");
    });
  };
}

obj.great(); // Output: "Hello Bilal !"