Call() & Apply() in JavaScript

Introduction
When we use call and apply we are usually working with objects. By using these methods we can inherit object methods from one object to another. So for example if a method was defined on object one it can be called by object two.

Whilst the concepts behind call and apply are similar the important difference to note is that when you use call you pass the parameters explicitly whereas with apply you pass the second argument as an array. Let’s look at an example to clarify this. We will start by looking at the call method.

Call

const person = {
  details: function() {
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

In the above example we create a person object. Inside of the object we then create a method called details. This method returns a template literal with the persons name. Next, we create another object called bob, bob has a name property and value set. Lastly in a console log we return the result of calling the details method with the call() method and pass in bob as the parameter. If we did not use the call method here we would get the following result.

console.log(person.details)
'My name is undefined'

So by using call we can use the details method defined on the person object but on our separate bob object. The this refers to what you pass in as a parameter to call. If we console log the value of this inside of the details method we can be sure of this.

const person = {
  details: function() {
    console.log(this)
    //returns ---> {name: 'Bob'}
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

Apply
Apply is very similar to call except that we must pass an array as the second parameter. Let’s start by adding a parameter to our initial example which used call.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob, 12));
//Returns ---> My name is Bob and I am 12 years old.

In the above example we now set a parameter for age in the details method which is used in the template literal. When we use the call method we pass in the value for this argument after we pass in the bob object. If we had used apply we would need to use an array here. This is shown in the example below.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.apply(bob, [12]));
//Returns ---> My name is Bob and I am 12 years old.

If we had not passed in an array when we used apply we would get the following error.

Uncaught TypeError: CreateListFromArrayLike called on non-object
    at <anonymous>:9:28

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!