Understanding Call, Apply, and Bind: Essential Methods in JavaScript

A most asked javascript Interview question.

JavaScript provides three methods for manipulating the this keyword in functions: call(), apply(), and bind(). These methods allow you to change the context of the this keyword, which can be useful for controlling the behaviour of functions. In this blog post, we will explore how these methods work and provide examples of their usage.

call(); (Call Method)

The call() method allows you to call a function with a specified this value and arguments provided individually. The first argument to call() sets the this value for the function being called, and the remaining arguments are passed to the function as arguments.

function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

let person = {
  name: "John"
};

greet.call(person, "Alice"); // Output: Hello, Alice! My name is John.

In this example, we define a greet() function that expects a name parameter. We also define a person object with a name property. We then call the greet() function with the call() method, passing in the person object as the this value and "Alice" as the name argument. As simple as that! Just call a method with call() and provide specific context this as per your choice.

apply(); (Apply Method)

The apply() method is similar to the call() method, but it takes an array of arguments instead of individual arguments. The first argument to apply() sets the this value for the function being called, and the second argument is an array of arguments to pass to the function.

function add(a, b) {
  return a + b;
}

let numbers = [1, 2];

console.log(add.apply(null, numbers)); // Output: 3

In this example, we define an add() function that takes two parameters. We also define an array of numbers [1, 2]. We then call the add() function with the apply() method, passing in null as the this value and numbers as the array of arguments.

bind(); (Bind Method)

The bind() method returns a new function with a specified this value and any arguments that are passed to it. The bind() method does not call the function immediately but instead returns a new function that can be called later.

let person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

let greetPerson = person.greet.bind(person);

greetPerson(); // Output: Hello, my name is John.

In this example, we define a person object with a name property and a greet() method that logs a greeting to the console. We then use the bind() method to create a new function greetPerson with the person object as the this value. We can then call the greetPerson() function to log the greeting.

Advantages

These methods offer several advantages over other techniques for controlling the behaviour of functions, including:

1. Explicitly setting the this keyword

In JavaScript, the value of the this keyword is determined by how a function is called. By using the call(), apply(), and bind() methods, you can explicitly set the value of the this keyword, regardless of how the function is called. This can be especially useful when working with complex code structures, where the value of this may change depending on how functions are nested and called.

2. Flexibility in passing arguments

The call() and apply() methods allow you to pass arguments to a function in a flexible way. For example, you can pass arguments as an array using the apply() method, which can be useful when working with functions that take a variable number of arguments. This can make your code more flexible and easier to work with.

3. Creating new functions with predefined arguments

The bind() method allows you to create a new function with a predefined this value and any arguments that are passed to it. This can be useful when you want to create a new function with a specific context or set of arguments. The new function can then be used in place of the original function, without having to redefine the this value or arguments each time.

4. Avoiding repetition of code

By using the call(), apply(), and bind() methods, you can avoid repeating code that sets the this value or passes arguments to a function. Instead, you can create a single function that accepts a this value and arguments, and then use the call(), apply(), or bind() methods to invoke the function with the correct context and arguments. This can save you time and reduce the amount of code you need to write.

Summary

In summary, the call(), apply(), and bind() methods allow you to manipulate the this keyword in JavaScript functions. The call() and apply() methods are used to immediately invoke a function with a specified this value and arguments, while the bind() method returns a new function with a specified this value that can be called later. These methods are powerful tools for controlling the behaviour of functions in JavaScript and offer flexibility, code reusability, and can make your code easier to read and maintain.

Comments

[Hardik Chopra]

One thing to note here is that arrow functions does not work the same with these methods. Arrow functions do not have their own this binding. They inherit this from the enclosing scope (lexical this). As a result, call(), apply(), and bind() do not affect the this value of arrow functions.