this keyword: how to properly implement in Javascript

this is a special keyword in JavaScript that refers to the object that is currently executing the code. However, the value of this can be difficult to understand and predict, especially when dealing with complex object-oriented code or callback functions.

this keyword

Here’s a simple example of how the this keyword can be problematic:

// Define an object with a method that uses this
const obj = {
  name: "MyObject",
  logName: function() {
    console.log(this.name);
  }
};

// Call the method and print the name
obj.logName(); // Output: "MyObject"

// Create a reference to the method and call it
const log = obj.logName;
log(); // Output: undefined (or possibly a reference error)

In this example, the obj object has a logName() method that uses this to log the object's name property. When the method is called directly on the obj object, this refers to the obj object and the code works as expected. However, when a reference to the method is stored in a variable and then called, this no longer refers to the obj object, and the code fails to log the name property.

However, the value of this can be different depending on the context in which it is used. For instance, in the global scope (i.e., outside of any function), this refers to the global object (e.g., window in a browser). In this case, it is important to be careful when using this, as it can lead to unintended consequences if it is not used correctly.

It is also possible to explicitly set the value of this using the bind(), call(), or apply() methods, which are available on all functions. These methods allow you to specify the value of this that should be used when the function is called.

Here is an example of using call() to set the value of this inside a function:

// Define an object with a method that uses this
const obj = {
  name: "MyObject",
  logName: function() {
    console.log(this.name);
  }
};

// Create a reference to the method and call it using call()
const log = obj.logName;
log.call(obj); // Output: "MyObject"

In this updated example, the log variable still refers to the logName() method, but when it is called, the call() method is used to specify the value of this. In this case, this is set to the obj object, so the code works as expected and logs the name property.

You can read more on apply, bind and call with examples on https://firstmonk.medium.com/apply-bind-and-call-abc-in-javascript-a988f5c616bb

If you liked this article, don’t forget to leave a clap and follow!