call(), apply() and bind() methods in Javascript

#javascript #beginners #programming #webdev

We know that functions are a special kind of objects in JavaScript. So they have access to some methods and properties. To prove functions are objects, we can do something like this, for example:

function greeting() {
  console.log('Hello World');
}
greeting.lang = 'English';
// Prints 'English'
console.log(greeting.lang);

JavaScript also provides some special methods and properties to every function object. So every function in JavaScript inherits those methods. Call, bind, and apply are some of the methods that every function inherits.

call( )

The call( ) allows for a function/method belonging to one object to be assigned and called for a different object.
Using the call method we can do a function borrowing.
We can borrow a method from some object and use it with the data of some other object.
We can do like following-

let name = {
  firstName: "nouman",
  lastName: "shah",
}

let printFullName = function () {
  console.log(this.firstName + " " + this.lastName)
}
printFullName.call(name)
//nouman shah

let name2 = {
  firstName: "Ali",
  lastName: "khan"
}
printFullName.call(name2)

In call( ), we pass arguments individually.

let printFullName = function (hometown, gender, job) {
  console.log(this.firstName + " " + this.lastName + " " + "from" + " " + hometown + " " + gender + " " + job)
}
printFullName.call(name, "Pakistan", "Male", "Software Engineer")

apply( )

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma-separated values.

printFullName.apply(name,["Pakistan","Male", "Software Engineer"])

bind( )

bind method looks similar to call but instead of directly calling the method, the bind method binds the printFullName with an object and returns a copy of that.

let printMyName=printFullName.bind(name)
printMyName();
// nouman shah

What it will do is that it will create a copy of printFullName and it will bind that with name object and will return a function that can be called later.