What Is the Use of this Keyword in JavaScript?

The this keyword in JavaScript refers to the object that is executing the current function. Its value depends on how and where the function is called. Understanding this is key to writing clean and bug-free JavaScript code.

Global Context

console.log(this); 
// In browsers, this refers to the window object

When used outside of any function, this refers to the global object, which is window in browsers.

Inside a Function

function show() {
  console.log(this);
}
show(); 
// Still refers to the global object (in non-strict mode)

In regular functions, this defaults to the global object unless in strict mode, where it becomes undefined.

Inside an Object Method

const user = {
  name: "Alice",
  greet: function () {
    console.log("Hi, I'm " + this.name);
  }
};

user.greet(); // "Hi, I'm Alice"

Here, this refers to the user object since the method is called on it.

Arrow Functions

const user = {
  name: "Bob",
  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // undefined

Arrow functions do not have their own this. They inherit this from the parent scope where they were defined.

Using this in Event Handlers

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

In this case, this refers to the button element that was clicked.

Manually Setting this

You can control what this refers to using call, apply, or bind:

function showName() {
  console.log(this.name);
}

const person = { name: "Charlie" };

showName.call(person); // "Charlie"