aweber-banner
Understanding Call, Bind and Apply Methods in JavaScript

Understanding Call, Bind and Apply Methods in JavaScript

In this article we will lean about Call, Bind and Apply Methods in JavaScript.

 In JavaScript, the value of this depends on how a function is called.

Let’s look at some examples to demonstrate the behavior of this in JavaScript.

const users = {
  firstName: 'John',
  lastName: 'Doe',
  getName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

users.getName();//John Doe


Above, we executed the getName() method using the users object, so the this keyword inside the method refers to the users object.

Use of Call, Bind and Apply Methods:

Also, in JavaScript functions are a special kind of object. So they have access to some methods and properties like call(), bind() and apply().

Bind( )

The bind method creates a new function and sets the this keyword to the specified object.

Syntax:

function.bind(thisArg, optionalArguments)

For example:

Let’s suppose we have two person objects.

const john = {
  name: 'John',
  age: 24,
};
const jane = {
  name: 'Jane',
  age: 22,
};

Let’s add a greeting function:

function greeting() {
  console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);
}

We can use the bind method on the greeting function to bind the this keyword to john and jane objects. For example:

const greetingJohn = greeting.bind(john);
// Hi, I am John and I am 24 years old
greetingJohn();
const greetingJane = greeting.bind(jane);
// Hi, I am Jane and I am 22 years old
greetingJane();

Here greeting.bind(john) creates a new function with this set to john object, which we then assign to greetingJohn variable. Similarly for greetingJane.

Bind() with arguments

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...). For example:

function greeting(lang) {
  console.log(`${lang}: I am ${this.name}`);
}
const john = {
  name: 'John'
};
const jane = {
  name: 'Jane'
};
const greetingJohn = greeting.bind(john, 'en');
greetingJohn();
const greetingJane = greeting.bind(jane, 'es');
greetingJane();

In the above example, the bind method creates a new function with certain parameters predefined (lang in this case) and this keyword set to the john and jane objects.

We can also create bind with specifc property like this:

const bookEW23 = book.bind(eurowings, 23);

//Here just need to pass remaining  
bookEW23('Jonas Schmedtmann');
bookEW23('Martha Cooper');

Basically we specifying parts of the arguments beforehand is actually a common pattern called partial application.

So essentailly,partial application means that a part of the arguments of the original funtion are already applied,means already set.

Bind with With Event Listeners

In event handler function,this keyword always points to the element on which that handler is attached to.

So we should use bind here to pass this keyword because call is used to call the method while bind returns the function

lufthansa.planes = 300;
lufthansa.buyPlane = function () {
    console.log(this);

    this.planes++;
    console.log(this.planes);
};

document.querySelector('.buy').addEventListener('click', lufthansa.buyPlane.bind(lufthansa));

Preset parameters with Bind()

We can also preset parameters in bind method, same as below:


const addTax = (rate, value) => value + value * rate;

console.log(addTax(0.1, 200));

const addVAT = addTax.bind(null, 0.23);
//Similar to
//addVAT= value=>value+value *0.23;

console.log(addVAT(100));
console.log(addVAT(23));

Call ( )

The call method sets the this inside the function and immediately executes that function.

The difference between call() and bind() is that the call() sets the this keyword and executes the function immediately and it does not create a new copy of the function, while the bind() creates a copy of that function and sets the this keyword.

Syntax:

function.call(thisArg, arg1, agr2, ...)

For example:

function greeting() {
  console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);
}
const john = {
  name: 'John',
  age: 24,
};
const jane = {
  name: 'Jane',
  age: 22,
};
// Hi, I am John and I am 24 years old
greeting.call(john);
// Hi, I am Jane and I am 22 years old
greeting.call(jane);

Above example is similar to the bind() example except that call() does not create a new function. We are directly setting the this keyword using call().

Call() also accepts a comma-separated list of arguments. The general syntax for this is function.call(this, arg1, arg2, ...)

function greet(greeting) {
  console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);
}
const john = {
  name: 'John',
  age: 24,
};
const jane = {
  name: 'Jane',
  age: 22,
};
// Hi, I am John and I am 24 years old
greet.call(john, 'Hi');
// Hi, I am Jane and I am 22 years old
greet.call(jane, 'Hello');

The main differences between bind() and call(): 

  1. Call() method accepts additional parameters as well
  2. Call() method Executes the function it was called upon right away.
  3. The call() method does not make a copy of the function while it is being called.

Apply ( )

The apply() method Works same as call but only diffrence is that apply does not recive a list of comma seprated arguments after the this keyword, but need to pass an array of data

Syntax:

function.apply(thisArg, [argumentsArr])

For example:

function greet(greeting, lang) {
  console.log(lang);
  console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);
}
const john = {
  name: 'John',
  age: 24,
};
const jane = {
  name: 'Jane',
  age: 22,
};
// Hi, I am John and I am 24 years old
greet.apply(john, ['Hi', 'en']);
// Hi, I am Jane and I am 22 years old
greet.apply(jane, ['Hola', 'es']);

In Morden, javascipt apply method is not used anymore because now we acatauly have a better of doing the exact same thing using spread operator as below:

book.call(swiss, ...flightData);

Conclusion:

Do let me know If you face any difficulties please feel free to comment below we love to help you.

If you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter

Subscribe to our Newsletter

Stay up to date! Get all the latest posts delivered straight to your inbox.

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment