Home » JavaScript » JavaScript Examples

How does the 'this' keyword work, and when should it be used?

By IncludeHelp Last updated : September 23, 2024

In this article, we will learn about the "this" keyword, how it works, and when it should be used in a program.

JavaScript "this" keyword

In general, "this" is a keyword used across various programming languages in the field of computer science for similar purposes. It is a reserved keyword in different programming languages and cannot be declared or defined as a custom variable.

The JavaScript "this" keyword is used to refer to the current object on which a method or variable is invoked.

How does the "this" keyword?

The "this" keyword in JavaScript is a special identifier that refers to the context in which a function is called. Its value can change based on how the function is invoked.

Following are the various uses of the "this" keyword with different concepts that define how it works:

1. Global Context

In the global execution context, this refers to the global object (i.e., the window in the browser).

console.log(this); // window (in browsers)

2. Object Method

When a function is called a method of an object, this refers to that object:

const person = {
  name: 'Rahul',
  greet() {
   document.write(`Hello, ${this.name}`); // "this" refers to "person"
  }
};
person.greet();

3. Function Call

In a regular function (not in strict mode), this refers to the global object, and in strict mode it is undefined.

function displayThis() {
  document.write(this);
}
displayThis();

4. Constructor Function

When a function is invoked with the new keyword, this refers to the new instance of the object being created.

function Person(name) {
  this.name = name; // "this" refers to the new object
}
const bob = new Person('Bob');
console.log(bob.name);

When should "this" keyword be used?

In JavaScript, the "this" keyword should be used when you need to refer to the context of an object or a function call. The best usage of "this is in the constructor function, which refers to object properties within methods to maintain encapsulation and clarity.

Following are key points about the usage of the "this" keyword:

1. Object-Oriented Programming

Use this in oops, when you need to reference the object that owns the method or the current instance.

2. Event Handlers

In event handling, "this" keyword often refers to the element that fired the event, making it useful for DOM manipulation.

3. Dynamic Context

When the context of a function may change, understanding this helps manage the state effectively, especially in callback functions.

Note

To better understand the "this" keyword and its usage, it's recommended to explore object-oriented programming languages like Java or C++. These languages provide clearer examples of how "this" operates in the context of class methods and object instances.

While JavaScript supports object-oriented principles, it is not a purely object-oriented language; it is more of a multi-paradigm scripting language. Therefore, studying languages like Java can provide a clearer understanding of concepts related to 'this', encapsulation, and object references.