JavaScript

Difference Between call() and apply() methods in JavaScript

In JavaScript, objects are defined with their own properties and are restricted for keeping the properties private. To resolve this problem, we use the call and apply methods. Using these methods, you can tie a function into an object and invoke it as if it belonged to the created object.

In JavaScript, call() and apply() methods are used to invoke a function with an optional argument and a specific “this” context. Both methods are quite similar, with a minor difference. Therefore, many people get confused with the usage of both these methods. This write-up will discuss the difference between call() and apply() methods in JavaScript.

The primary difference between both of the mentioned methods is the way they handle the arguments of a function. However, both functions allow you to control the “this” keyword inside the defined function.

call() Method in JavaScript

In this method, a function is called with its arguments which are provided individually. The keyword “this” is added for referring to the owner of the object.

Example: Using call() Method in JavaScript

In the following example, “person” is the object of the “this” keyword that owns the properties of a mentioned object, such as firstName and lastName. In the next step, we will define a “fullName()” function that is going to borrow the properties of the “person” object in its body:

const person = {
  firstName: 'Alice',
  lastName: 'Mark',
}

function fullName() {
  console.log(`${this.firstName} ${this.lastName}`)
}

fullName.call(person)

Invoke a call() method with arguments

object.objectMethod.call( objectInstance, arguments )

Parameters of call() method
Two parameters are accepted by the call() method.

argument: It takes the arguments which are separated by commas.

objectInstance: It has the instance of an object and checks the type of object at run time.

Example: Using call() method with arguments in JavaScript

First of all, we will create a “person” object and then add a “fullName” method in it. The fullName method of “person” object is a function which will take “age” and “height” as its parameters. This function will return the “firstName”, “lastName” of the current instance of the object, with its age and height:

const person = {
  fullName: function(age, height) {
    return this.firstName + " " + this.lastName + "," + age + "," + height;
  }
}

Next, we will create another object named “personN” having two properties, “firstName” and “lastName”. After doing so, we will invoke the “fullName” method of the “person” object while passing “personN” as object instance, “25” as age argument, and “5ft” as the height argument value:

const personN = {
  firstName:"Alice",
  lastName: "Mark"
}

person.fullName.call(personN, "25", "5ft");

apply() Method in JavaScript

The apply() method takes the arguments of a function in the form of an array, which can be used on different objects.

Example: Using apply() method in JavaScript
In the given example, apply() method is used to call the “fullName()” method of the “person” object while passing “personN” as an object instance:

const person = {
  FullName: function() {
    return this.FirstName + " " + this.LastName;
  }
}

const personN = {
  FirstName: "Alice",
  LastName: "Mark"
}

person.FullName.apply(personN);

Execution of the above-given program will show you the values of “firstName” and “lastName” properties of the “person” object:

Invoke an apply() method with arguments

object.objectMethod.apply(objectInstance, arrayOfArguments)

There are two parameters in apply() method:

objectInstance: It checks the type of an object at run time.

arrayOfArguments: It takes the arguments from an array..

Example: Using apply() method in JavaScript
The given example shows the implementation of the apply() method with arguments:

const person = {
  FullName: function(age, height) {
    return this.FirstName + " " + this.LastName + "," + age + "," + height;
  }
}

const personN = {
  FirstName:"Alice",
  LastName: "Mark"
}

person.FullName.apply(personN, ["25", "5ft"]);

Difference between call and apply methods in JavaScript

The main difference between call() and apply() JavaScript methods is:

  • In the call() method, arguments are passed individually.
  • The apply() method accepts the arguments in the form of an array.

Conclusion

In JavaScript, the call() method accepts the individual argument, whereas the apply() method accepts the arguments in the form of an array. This article explained the difference between these two methods profoundly, demonstrated the implementation of both methods with and without arguments, and explicitly explained them with brief examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.