Master Call, Apply and Bind in JavaScript and Ace Your Interview

JavaScript is a powerful and flexible language that allows you to manipulate the context of functions using three methods: call, apply and bind. These methods are useful for changing the value of thisinside a function, which determines the object on which the function operates. In this article, we will explain how to use call, apply and bind in JavaScript with simple examples.

What are call, apply and bind?

Call, apply and bind are three methods that belong to the Function prototype object in JavaScript. They allow you to change the value of this inside a function and execute it with different arguments.

Call

The call method is used to call a function with a given this value and arguments as comma-separated values.

let person1 = {
  firstName: 'Karan',
  lastName: 'Sharma'
};

let person2 = {
  firstName: 'Rakesh',
  lastName: 'Verma'
};

function sayHello(greeting) {
  console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

sayHello.call(person1, 'Hello'); // Hello Karan Sharma
sayHello.call(person2, 'Hello'); // Hello Rakesh Verma

In this example, we use the call method to invoke the sayHello function with the person object as its this value and the string “Hello” as its argument. This way, we can change the context of the function and access the properties of the person object inside the function.

The call method is useful when you want to execute a function with a different this value and a fixed number of arguments. You can also use the call method to borrow methods from other objects or classes.

Apply

The apply method is very similar to the call method, except that it takes arguments as an array (or an array-like object) instead of comma-separated values. For example:

let person1 = {
  firstName: 'Karan',
  lastName: 'Sharma'
};

let person2 = {
  firstName: 'Rakesh',
  lastName: 'Verma'
};

function sayHello(greeting) {
  console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

sayHello.apply(person1, ['Hello']); // Hello Karan Sharma
sayHello.apply(person2, ['Hello']); // Hello Rakesh Verma

Bind

The bind method is different from the call and apply methods in that it does not execute the function immediately, but returns a new function with a given thisvalue and arguments. For example:

By using bind(), you can create new functions with pre-defined contexts, which can then be invoked with the desired arguments.

let person1 = {
  firstName: 'Karan',
  lastName: 'Sharma'
};

let person2 = {
  firstName: 'Rakesh',
  lastName: 'Verma'
};

function sayHello(greeting) {
  console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

let sayHelloToPerson1 = sayHello.bind(person1);
let sayHelloToPerson2 = sayHello.bind(person2);

sayHelloToPerson1('Hello'); // Hello Karan Sharma
sayHelloToPerson2('Hello'); // Hello Rakesh Verma

How to crack this interview question?

This question is often asked in JavaScript interviews to test your understanding of how functions work in JavaScript and how you can manipulate their context using call, apply and bind. Here are some tips on how to crack this question:

• Explain the difference between call, apply and bind in terms of their syntax and behavior.
• Give examples of how to use each method with different arguments and contexts.
• Mention some use cases or scenarios where these methods are useful or necessary.
• Compare and contrast these methods with other ways of changing the value of this, such as arrow functions or global objects.
• Demonstrate your knowledge of how this works in JavaScript and how it depends on the execution context.

Summary

In this article, we have learned how to use call, apply and bind in JavaScript with simple examples. We have also provided some tips on how to crack this interview question when asked. Here are some key points to remember:

• Call, apply and bind are three methods that allow you to change the value of this inside a function and execute it with different arguments.
• Call and apply execute the function immediately with a given this value and arguments as comma-separated values or an array, respectively.
• Bind returns a new function with a given this value and arguments that can be invoked later.
• These methods are useful for changing the context of functions and creating new functions with fixed contexts. We hope you found this article helpful and informative.