call(), apply() and bind() Methods in JavaScript.

If you are learning JavaScript, you might have seen the this keyword. The this keyword in JavaScript behaves differently compared to other programming languages. Working with JavaScript this keyword can be tricky. Not knowing the background rules may end up it works but I have no idea why. It’s good to know the theory before putting things into practice. Call(), Apply(), and Bind() methods can come in handy when setting the this value.

Basic rules worth remembering

1. this always refers to an object.
2. this refers to an object which calls the function it contains.
3. In the global context, this refers to either window object or is undefined if the ‘strict mode’ is used.

Let’s look at an example.

const person = {
  firstName: 'Muhammad',
  lastName: 'Hassan',
  printName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};
person.printName();

This prints: Muhammad Hassan

Here, we are calling the printName() method using the person object, so the this keyword inside the method refers to the person object.

Let’s write the below snippet at the end of the above code.

const printFullName = person.printName;
printFullName();
result: undefined undefined

We are storing a reference of person.printName to printFullName variable. After that, we are calling it without an object reference, so this will now refer to the window (global) object or undefined (in strict mode).

If the script is in strict mode, this refers to, so console.log() will return an error.

Call( ), Bind( ), and Apply( )

We use call, bind, and apply methods to set the this keyword independent of how the function is called. This is especially useful for the callbacks.

We know that functions are a special kind of object in JavaScript. So they have access to some methods and properties.

Every function in JavaScript inherits some special methods. Call, bind, and apply are some of the methods.

bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. — MDN

lets look at an example

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function() {
    console.log(this.getPokeName() + 'I choose you!');
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now

logPokemon(); // 'Pika Chu I choose you!'

The JS engine is creating a new pokemonName instance and binding pokemon as its this variable. It is important to understand that it copies the pokemonName function.

After creating a copy of the pokemonName function it is able to call logPokemon() , although it wasn’t on the pokemon object initially. It will now recognize its properties (Pika and Chu) and its methods.

call(), apply()

The call() method is used to call a function with a given this and arguments provided to it individually.

This means that we can call any function, explicitly specifying the reference that this should reference in the calling function.

The apply() method is an important method of the function prototype and is used to call other functions with a provided this keyword value and arguments provided in the form of an array or an array-like object.

call() and apply() serve the exact same purpose. The only difference between how they work is that call() expects all parameters to be passed in individually, whereas apply() expects an array of all of our parameters.

Resources:

Understanding Call, Bind and Apply Methods in JavaScript

Javascript: call(), apply() and bind()

How to use the apply(?), call(?), and bind(➰) methods in JavaScript

JavaScript Under The Hood Pt. 4: Bind(), Call(), and Apply()