Javascript Apply

The apply() method in JavaScript allows us to call a function with a specified this value and arguments provided as an array or an array-like object.

As an example:

const person = {
  firstName: "John",
  lastName: "Doe",
};

function fullName() {
  return this.firstName + " " + this.lastName;
}

// using apply() to call the function fullName() on the person object
const fullNameResult = fullName.apply(person);
console.log(fullNameResult); // "John Doe"

In this example:

• We have an object person with firstName and lastName properties, and a function fullName() that returns the full name of a person.
• We call the fullName() function using apply() on the person object, which sets the this value of the function to the person object.

Difference Between call() and apply()

The call() and apply() methods in JavaScript are similar in that they both allow you to call a function with a specified this value.

The main difference between call() and apply() is the way arguments are passed to the function:

• call() expects the arguments to be passed as individual values, separated by commas.
• apply() expects the arguments to be passed as an array or an array-like object.

Here's an example of how to use call():

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

const person = {
  firstName: "John",
  lastName: "Doe",
};

const fullNameResult = fullName.call(person, person.firstName, person.lastName);
console.log(fullNameResult); // "John Doe"

In this example:

• We call the fullName() function using call(), passing the person object as the first argument, followed by the firstName and lastName properties of the person object.

Here's an example of how to use apply():

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

const person = {
  firstName: "John",
  lastName: "Doe",
};

const fullNameResult = fullName.apply(person, [
  person.firstName,
  person.lastName,
]);
console.log(fullNameResult); // "John Doe"

In this example:

• We call the fullName() function using apply(), passing the person object as the first argument, followed by an array of arguments containing the firstName and lastName properties of the person object.

note

Note that both call() and apply() allow you to specify the this value for the function. When you call a function using call() or apply(), you can pass an object as the first argument, and the this value of the function will be set to that object.

The apply() Method with Arguments

With the apply() method, you can pass arguments to the function as an array or an array-like object.

The apply() method unpacks the array and passes its values as separate arguments to the function.

Here's an example of how to use apply() with arguments:

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

const result = sum.apply(null, numbers);
console.log(result); // 6

In this example:

• We have a function sum() that takes three arguments and returns their sum.
• We create an array numbers containing the values we want to pass as arguments to the function.
• We call the sum() function using apply(), passing null as the this value and the numbers array as the second argument.
• The apply() method unpacks the array and passes its values as separate arguments to the sum() function.