Understanding call(),apply(),bind() in Javascript

Topics covered

1. Why we need call(),apply(),bind()?
2. What is call(),apply(),bind()?
3. When to use call(),apply(),bind()?

Traditionally in javascript, you can have objects that have their own properties and methods, one object cannot use the methods of another object but there is a way to overcome this restriction.
By using call(), apply() and bind() methods to tie a function into an object and call that function as if it belonged to that object.

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 printMessage() {
  console.log('Welcome!');
}
printMessage.city = 'Bangalore';

// Prints 'Bangalore'
console.log(printMessage.city);

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() :

By using call() you can tie a function into an object, this way you can call the function as if it belonged to the object.

Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}
console.log(add.call(object,3,5));// prints 10

apply() :

The apply() method does the exact same as call().
The difference is that call() accepts an argument list, but apply() accepts an array an array of arguments.

Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}
console.log(add.apply(object,[3,5]));// prints 10

We can use apply() to append an array to another array, for example

const numbers = [1,2,3];
const moreNumbers = [4,5,6];
numbers.push.apply(numbers, moreNumbers);
console.log(numbers); // prints [1,2,3,4,5,6]

bind() :

The bind() method is reminiscent of call() and apply(), but instead of executing a function immediately , bind() returns a function that can be executed later on.
Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}

const func = add.bind(object,3,5);
console.log(func())
// prints 10

Function currying using bind():

Example:

let multiply = function(x,y){
  console.log(x * y); //prints 10
}
let multiplyByTwo = multiply.bind(this, 2);
multiplyByTwo(5);

Here in this example, we created multiply function which multiplies two parameters x and y and logs it to the console.

Now let us create another function multiplyByTwo which is exactly the copy of multiply. We will generally create this copy by executing the bind method over multiply. Over here we will pass generally passing some arguments. The second argument we will pass is 2.

As we know that when we call the bind method gives the copy of the multiply method and doesn’t invoke it directly. So this means that the value 2 will be set as the value of x. So now let us execute the multiplyByTwo function.

Thanks for reading, happy to hear feedback and suggestion in comments section.