JavaScript Function apply() and bind() Methods

1. JavaScript Function.apply() Method
2. JavaScript Function.bind() Method

This tutorial will teach you how to use the JavaScript function type’s apply() and bind() methods.

JavaScript Function.apply() Method

You may invoke a function using an array of specified parameters and a given this value using the Function.prototype.apply() method. The syntax for the apply() function is as follows:

Function.apply(thisArg, [args]);

Two parameters may be sent to the apply() function. The thisArg parameter is the value of this supplied for the function call, and the args argument is an array that defines the function’s arguments.

The args parameter may be either an array object or an array-like object since ES5.

Similar to the call() method, the apply() method accepts the function’s parameters as an array rather than as individual arguments.

Let’s look at a few examples using the apply() method. Suppose you have an indivi object, and a greeting function named as gt as follows:

const indivi = {
  fName: 'Shiv',
  lName: 'Yadav',
};
function gt(wave, sms) {
  return `${wave} ${this.fName}. ${sms}`;
}
let output = gt.apply(indivi, ['Hello', 'Where are you going?']);
console.log(output);

Run Code

wave and sms are the two arguments the gt() method takes. We refer to an object with the fName field inside the gt() function.

The apply() method may be used to invoke the gt() function with this set to an individual object by using the example below:

Output:

"Hello Shiv. Where are you going?"

The above example sets the indivi object as this value within the function. The apply() method received the gt() function’s parameters as an array.

The gt() function was called by the apply() method, with the parameters as an array ["Hello," "Where are you going?"] and this value is set to the indivi object.

JavaScript Function.bind() Method

The this keyword of the new function created by the bind() method is set to the supplied value when invoked. Although it genuinely discusses many more topics, we’ll save it for another time.

This has a lot of power. Invoking a function enables us to declare the value of this explicitly.

Let’s examine the code:

var indivi = {
  fName: 'Shiv',
  lName: 'Yadav ',
  getIndiviName: function() {
    var fName = this.fName + ' ' + this.lName;
    return fName;
  },
};

var indiviName = function() {
  console.log(this.getIndiviName() + 'Where are you Going ?');
};

var logName = indiviName.bind(indivi);

logName();

Run Code

Let’s dissect it. The JS engine creates a new instance of indiviName and binds indivi as this variable when we use the bind() function. It’s crucial to realize that it duplicates the indiviName Function.

Although logName() wasn’t originally on the indivi object, it may now be called after duplicating the indiviName function. It will now be able to identify its attributes (Shiv and Yadav) and its practices.

The significant part is that after a value has been bound, we can utilize the function just as we would any other regular function.

Output:

"Shiv Yadav Where are you Going ?"