this Keyword

In JavaScript, this keyword refers to the object that the current function is a method of. It is a way to access the object that the function is a property of, and it is determined at runtime. The value of “this” can change depending on the context in which the function is called.

In a regular function, the value of “this” is determined by how the function is called. In the global scope, the value of “this” is the global object (e.g. window in the browser). In strict mode, the value of “this” is undefined in the global scope.

When a function is called as a method of an object, the value of “this” is set to the object that the method is called on. For example, in the following code, the value of “this” inside the “printName” function would be the “person” object:

let person = {
    name: "Surya",
    printName: function() {
        console.log(this.name);
    }
};

person.printName(); // Output: "Surya"

When a function is used as a constructor with the new keyword, the value of “this” is set to the newly created object. For example, in the following code, the value of “this” inside the “Person” constructor function would be the new object that is created:

function Person(name) {
    this.name = name;
}

let john = new Person("Surya");
console.log(surya.name); // Output: "Surya"

The value of “this” can also be explicitly set using the call(), apply() or bind() methods. These methods allow you to call a function and set the value of “this” to a specific object.

In arrow function in javascript, the value of “this” is determined by the context in which the arrow function was defined, rather than how it was called.

It’s important to note that in JavaScript, the value of “this” can be tricky to understand and predict, and it’s one of the more confusing aspects of the language. It is a powerful feature when used correctly, but it can also lead to unexpected behavior if not used carefully.

When to use ‘this’ keyword

The “this” keyword is typically used in the following situations:

  1. Inside an object’s method: When a function is a method of an object, the “this” keyword can be used to reference the object that the method is called on.
  2. Inside a constructor function: When a function is used as a constructor with the “new” keyword, the “this” keyword can be used to reference the new object that is being created.
  3. Inside an event handler: When a function is used as an event handler, the “this” keyword can be used to reference the element that the event is associated with.
  4. To maintain context within arrow function : When you want to use arrow function in different scopes and also to maintain the context where the function is defined.
  5. When you want to chain multiple methods together.

It’s important to keep in mind that the value of “this” can be unpredictable when used inside nested functions or closures, so it’s important to understand the context in which the function is called and how the value of “this” is determined before using it.

Some advantages to using the “this” keyword in JavaScript:

  1. Flexibility: The “this” keyword allows you to write more flexible and reusable code, as it allows you to reference the object that the function is a property of without having to know the specific object’s name.
  2. Code Organization: The “this” keyword can make your code easier to read and understand, as it makes it clear which object a function is associated with.
  3. Code Reusability: The “this” keyword allows you to write functions that can be used on multiple objects, making your code more reusable.
  4. Method Chaining: The “this” keyword allows you to chain multiple methods together, making your code more concise and readable.
  5. Using “this” keyword in constructor function makes it easy to create multiple objects with similar properties and methods.
  6. Using “this” keyword with arrow function makes it easy to use in different scopes and also to maintain the context where the function is defined.

It’s important to keep in mind that the “this” keyword can also lead to unexpected behavior if not used carefully, especially when using it inside nested functions or closures.

this keyword this keyword