'this' keyword, call(), apply() and bind() methods in JavaScript - simply explained

Learning the call(), apply(), and bind() methods is important because they allow you to control the context of this in JavaScript. In situations where the default this behavior doesn't work as expected, like when borrowing methods from one object to another or maintaining the correct context inside callbacks, these methods provide flexibility and control. By mastering them, you can write more efficient, reusable, and context-aware functions, which is especially useful in complex applications.

before we jump into the call(), apply() and bind() methods, let’s understand ‘this’ keyword and its mechanism.

‘this’ Keyword

Let’s understand when and what this keyword refers to by the following bullet points here:

• In an object method, this refers to the object. Inside a method defined within an object, this will point to the object that owns the method.

• In a regular function, this refers to the global object. In non-strict mode, if a function is invoked in the global context (not as a method of an object), this refers to the global object (window in browsers).

• In a strict mode function, this is undefined. If the function isn't a method of an object and isn't bound to a specific context (via call, apply, or bind), this will be undefined in strict mode.

• In event handlers, this refers to the element that received the event. When an event is triggered, this refers to the HTML element that invoked the event.
  

  <button onclick="this.style.display='none'">
    Click to Remove Me!
  </button>
  

  In this case, this refers to the button element itself that received the onclick event.

In arrow functions, this behaves differently. Arrow functions don't have their own this context. Instead, this is lexically inherited from the surrounding scope at the time the arrow function is created. This means this inside an arrow function will refer to the this value of its enclosing function or context.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

In this case, the arrow function inside setTimeout inherits this from the greet method, which points to the person object.

call() Method

The call() method lets you "borrow" a function or method from one object and use it with another object by passing the other object as the first argument. The first argument becomes the this value inside the function, and additional arguments follow after.

The call() method doesn't create a new function; it runs the existing function with the provided context and arguments.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

In this example, call() is used to execute the fullName method of person with person1's data (firstName and lastName), and the additional arguments are "Oslo" and "Norway".

apply() Method

The apply() method is very similar to the call() method. The main difference lies in how arguments are passed to the function. With apply(), you pass the arguments as an array (or an array-like object), rather than individually.

Like call(), the apply() method does not create a new function. It immediately executes the function with the provided context (this value) and arguments.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

In this example, apply() is used to call the fullName method of the person object, but with the context (this) of person1. The arguments "Oslo" and "Norway" are passed as an array.

bind() Method

The bind() method in JavaScript lets you set the context (this value) for a function or method, just like call() and apply(). However, unlike call() and apply(), the bind() method doesn’t immediately invoke the function. Instead, it returns a new function with the this value set to the object you specify.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

In this example, bind() creates a new function func with the this value set to person1. The function is not called right away, but you can invoke it later, passing in the arguments "Oslo" and "Norway".

Example: Centralized Logger with Multiple Contexts

Here’s a small but complex application example where using call(), apply(), or bind() brings efficiency—especially in handling partial application of functions for logging purposes:

Let's say you have a centralized logging function that logs information about different users performing actions. Using bind() allows you to set the this context to different users efficiently, avoiding repetitive code.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

Why It’s Efficient:

Context Reuse: You don't need to manually pass the user context every time you log an action. The context (this) is bound once, and the logging becomes reusable and clean.

Modularity: If you need to add more users or actions, you can quickly bind them to the logger without altering the function itself, keeping your code DRY (Don’t Repeat Yourself).