JavaScript this Keyword

Understanding this keyword in JavaScript

In JavaScript, the value of this keyword depends on the context in which a function is called. It's a special keyword that refers to the object that is executing the current function.

Here’s a basic example of this inside an object method:

const person = {
  name: "Tom",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet();

const person = {
  name: "Tom",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet();

• person.greet(): Calls the greet method on the person object.
• this.name: Refers to the name property of the object that called the method — in this case, person.
• Output: The method prints "Hello, Tom" to the console.

The behavior of this changes based on how the function is invoked — not where it’s defined. This is what makes this powerful, but sometimes confusing.

You’ll see this used a lot in object methods, constructor functions, event handlers, and classes — all fundamental to JavaScript development.

Example 1: this keyword in an Object Method

Let’s begin with a simple example where this is used inside a method of an object. This is one of the most common and intuitive uses of this.

const user = {
  name: "John",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

user.greet();

const user = {
  name: "John",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

user.greet();

What’s Happening Here:

• const user = { ... }: Defines an object with a name property and a greet method.
• this.name: Refers to the name property of the object that calls the method.
• user.greet(): Calls the method, making this refer to user.

Output:

Hello, John

Hello, John

When used in an object’s method, this refers to the object itself. This allows methods to access or modify the object’s own properties.

Example 2: this keyword in the Global Context

When you use this in the global context (outside any function or object), its value depends on the environment in which the code is running:

• In Browsers: this refers to the global window object.
• In Node.js: this refers to an empty object {} in the module scope, not the global object.

// Example 2: Global context
console.log(this);

// Example 2: Global context
console.log(this);

What’s Happening Here:

• this is used outside any object or function.
• Its value changes based on the JavaScript environment.

Output in a Browser (e.g., Chrome):

Window { ... }

Window { ... }

Output in Node.js (e.g., using node CLI):

{}

{}

The reason this is an empty object in Node.js is because each file is treated as a module, and this in a module points to the module's `exports` object, not the global object.

To refer to the global object explicitly in Node.js, use global (in browsers, use window or globalThis for cross-environment compatibility).

Example 3: this keyword in Regular Functions vs. Arrow Functions

The value of this behaves differently inside regular functions compared to arrow functions.

Regular functions have their own this based on how they are called, while arrow functions inherit this from the surrounding (lexical) context.

const person = {
  name: "Tom",
  regularFunction: function() {
    console.log("Regular function:", this.name);
  },
  arrowFunction: () => {
    console.log("Arrow function:", this.name);
  }
};

person.regularFunction(); // Outputs: Tom
person.arrowFunction();   // Outputs: undefined (or window.name in browsers)

const person = {
  name: "Tom",
  regularFunction: function() {
    console.log("Regular function:", this.name);
  },
  arrowFunction: () => {
    console.log("Arrow function:", this.name);
  }
};

person.regularFunction(); // Outputs: Tom
person.arrowFunction();   // Outputs: undefined (or window.name in browsers)

What’s Happening Here:

• regularFunction has its own this, which points to the person object when called as a method.
• arrowFunction does not have its own this — it uses the this value from the surrounding context, which is usually the global object.
• This is why this.name inside the arrow function is undefined or refers to a global name (often undefined).

Output:

Tom
undefined

Tom
undefined

This difference is crucial to understand when choosing between arrow functions and regular functions for methods or callbacks.

Example 4: this keyword in Event Handlers

In browser environments, when you use this inside an event handler (with a regular function), it usually refers to the DOM element that triggered the event.

// Browser environment
const button = document.createElement("button");
button.textContent = "Click me";

button.addEventListener("click", function() {
  console.log(this); // Logs the <button> element
});

document.body.appendChild(button);

// Browser environment
const button = document.createElement("button");
button.textContent = "Click me";

button.addEventListener("click", function() {
  console.log(this); // Logs the <button> element
});

document.body.appendChild(button);

What’s Happening Here:

• The event listener is a regular function, so this refers to the button element that received the click event.
• If you used an arrow function, this would refer to the outer lexical context, not the element.

Browser Output:

<button>Click me</button>

<button>Click me</button>

In browsers, this behavior makes it easy to interact with the element that triggered the event.

What about Node.js?

Node.js doesn’t have a DOM, but you can simulate event handlers using EventEmitter. In this case, this refers to the instance of the emitter that triggered the event.

// Node.js environment
const EventEmitter = require("events");

class MyEmitter extends EventEmitter {}

const emitter = new MyEmitter();

emitter.on("greet", function () {
  console.log(this); // Logs the emitter object
});

emitter.emit("greet");

// Node.js environment
const EventEmitter = require("events");

class MyEmitter extends EventEmitter {}

const emitter = new MyEmitter();

emitter.on("greet", function () {
  console.log(this); // Logs the emitter object
});

emitter.emit("greet");

Node.js Output:

MyEmitter { _events: { greet: [Function (anonymous)] }, ... }

MyEmitter { _events: { greet: [Function (anonymous)] }, ... }

Just like in the browser, using a regular function binds this to the emitter instance. If you used an arrow function, this would refer to the outer scope.

Frequently Asked Questions

What's Next?

Next, you'll explore how this behaves in class constructors and event listeners.