JavaScript Apply Function

❮ Prev Next ❯

The apply() method in JavaScript is similar to the call() method, allowing you to call a function with a specified this value and arguments provided as an array.

It enables you to execute a function within a specific context and pass arguments dynamically, similar to call().

Syntax

The syntax for the apply() method is as follows: 


functionName.apply(thisArg, [argsArray]);
  • functionName:The name of the function to be called.
  • thisArg:The value to be passed as this to the function being called.
  • argsArray:An array-like object containing the arguments to be passed to the function.

Purpose

The primary purpose of the apply()method is to execute a function with a specified context ( thisthis value) and an array of arguments.

Examples:

Consider the following example: 


const Person = {
  fullName:function(city, country) {
    return this.firstName + " " + this.lastName + " , " + city + " , " + country;
  }
};

const person1 = {
  firstName:"John",
  lastName:"Dove"
};

const person2 = {
  firstName:"Jane",
  lastName:"Dove"
};

// Apply the fullName function with person1 as the 'this' value and arguments as an array
const fullName1  = Person.fullName.apply(person1, ["New York", "USA"]);
console.log(fullName1); // Output: John Doe, New York, USA

// Apply the fullName function with person2 as the 'this' value and arguments as an array
const fullName2  = Person.fullName.apply(person2, ["London", "UK"]);
console.log(fullName2); // Output: Jane Doe, London, UK

In the above example, we use the apply() method to invoke the fullName method of the person method to invoke the fullName object with differen Person objects (person1 and person2) as the context (this), along with arguments provided as an array. This allows us to dynamically set the this value and pass arguments to the function.

Example 


const Person = {
  fullName:function(city, country) {
    return this.firstName + " " + this.lastName + " , " + city + " , " + country;
  }
};

const person1 = {
  firstName:"John",
  lastName:"Dove"
};

const person2 = {
  firstName:"Jane",
  lastName:"Dove"
};

// Apply the fullName function with person1 as the 'this' value and arguments as an array
const fullName1  = Person.fullName.apply(person1, ["New York", "USA"]);
console.log(fullName1); // Output: John Doe, New York, USA

// Apply the fullName function with person2 as the 'this' value and arguments as an array
const fullName2  = Person.fullName.apply(person2, ["London", "UK"]);
console.log(fullName2); // Output: Jane Doe, London, UK

Benefits

The apply() method provides flexibility in setting the context and passing arguments to a function. It is particularly useful when you have an array of arguments or want to dynamically determine the context in which a function is executed.

Similar to call(), one limitation of the apply() method is that it may not be as readable as traditional function calls, especially when dealing with complex contexts or argument arrays. Additionally, passing arguments as an array can sometimes be less intuitive than passing them individually.

It enables you to reuse functions with different objects and pass arguments dynamically.

Limitations

The apply() method is a valuable tool in JavaScript for controlling the execution context of functions and passing arguments dynamically.

It complements the call() method and provides alternative syntax for achieving similar functionality.

❮ Prev Next ❯