call(), apply() and bind() in Javascript with examples

Hello friends, In this new tutorial, we are going to discuss the call(), bind(), and apply() method in Javascript. If you are working in javascript for some time, naturally, you have faced these concepts. If we understand these concepts thoroughly, we can do better in javascript. If we see for the interview, it is one of the most asked questions.

Javascript “this” Refresher

While learning Javascript, we all have come around this keyword. The this keyword in javascript works (behaves) differently as compared to the other programming languages. We will try to understand this keyword very briefly.  

The this keyword in JavaScript confuses many developers if we see the natural language like English and other languages. Like if we write, “Bedan is running fast because he is trying to catch the train on time.”. If we check carefully first, we have used “Bedan” and added the “he” instead of the actual name the second time. If we use “Bedan” a second time also, it will become ambiguous and repeated. Similarly, in Javascript, we use this keyword as a shortcut, a referent. It refers to an object, that is, the subject in the context or the subject of the executing code.
If you want to understand fully this, please visit this site 🙂

Let’s take an example of this

const person = {
  firstName: 'Abhay',
  lastName: 'Pandey',
  age: 29,
  getIntroduction: function() {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old.`);
  }
}

person.getIntroduction(); // "Abhay Pandey is 29 years old."

function randomFunc() {
  console.log(this);
}

randomFunc(); // window object

In a method(function): this refers to the owner object. In a function(sloppy mode): this refers to the global object. In a function(strict mode): this is undefined.

1. call()

According to the official document

“The call() method calls a function with a given this value and arguments provided individually.”

The call() method allows a function belonging to one object to be assigned and called for a different object. We can call this “Function borrowing”(without rewriting the function) because we call the function with a different object. Lets take an example

const person = {
  firstName: 'Abhay',
  lastName: 'Pandey',
  age: 29
}

function getIntroduction(location, state) {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old, stayed at ${location} ${state}`);
  }

getIntroduction.call(person,'Mumbai','Maharastra'); // "Abhay Pandey is 29 years old. stayed at Mumbai Maharastra"

const person2 = {
  firstName: 'Nirbhay',
  lastName: 'Pandey',
  age: 27,
}

getIntroduction.call(person2,'Hyderbad', 'AP'); // "Nirbhay Pandey is 27 year old, stayed at Hyderabad AP"

The call method sets the this inside the function and immediately executes that function. In the call method, we are passing arguments as comma-separated values.

2. apply()

According to the official document(MDN) definition

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like-object). While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

In the call method, we have passed the argument in a comma-separated form. But in the apply method, we pass it as an array list.

The difference between call() and apply() is as follows

1. call() set this and execute the function immediately.
2. In call() method we can pass the value as comma-separated form.
3. In apply() method, we can pass parameters as an array list.

const person = {
  firstName: 'Abhay',
  lastName: 'Pandey',
  age: 29
}

function getIntroduction(location, state) {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old, stayed at ${location} ${state}`);
  }

getIntroduction.call(person, ['Mumbai','Maharastra']); // "Abhay Pandey is 29 years old. stayed at Mumbai Maharastra"

3. bind()

According to the official documentation (MDN) definition

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.

An easy way to remember the bind method is that it returns a new function altogether. It does not call the process as in call() and apply().

Lets see an example

const person = {
  firstName: 'Abhay',
  lastName: 'Pandey',
  age: 29
}

function getIntroduction(location, state) {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old, stayed at ${location} ${state}`);
  }


// bind function 

let newFun = getIntroduction.bind(person,'Mumbai','Maharastra' );

// if we want to call this we can call it as normal function 

newFun();

//outPut: Abhay Pandey is 29 years old, stayed at Mumbai Maharastra

differences b/w call() and bind()?

1. call () method gets invoked immediately. But in the bind() it returns a new function that we can invoke in the future.
2. call() function doesn’t make a copy of the function. Unlike bind() create a new copy of the function.

Conclusion

In this article we have understand these(Javascript call(), bind() and apply()) basic concept. These are the basic fundamental concepts to understand Javascript. Hopefully, it will benefit some users.