Function Apply

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Function Apply

Method Reuse

With the apply() method, you can write a method that can be used on different objects.

The JavaScript apply() Method

The apply() method is similar to the call() method.

In this example the fullName method of person is applied on person1:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>

<p id=”demo”></p>

<script>

const person = {

  fullName: function() {

    return this.firstName + ” ” + this.lastName;

  }

}

const person1 = {

  firstName:”John”,

  lastName: “Doe”

}

document.getElementById(“demo”).innerHTML = person.fullName.apply(person1);

</script>

</body>

</html>

Output

JavaScript Functions

In this example the fulllName method of person is applied on person1:

The Difference Between call() and apply()

The difference is:

The call() method takes arguments separately.

The apply() method takes arguments in the form of an array.

The apply() method is easy to handle if you want to use an array instead of an argument list.

The apply() Method with Arguments

The apply() method accepts arguments in the form of an array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>

<p id=”demo”></p>

<script>

const person = {

  fullName: function(city, country) {

    return this.firstName + ” ” + this.lastName + “,” + city + “,” + country;

  }

}

const person1 = {

  firstName:”John”,

  lastName: “Doe”

}

document.getElementById(“demo”).innerHTML = person.fullName.apply(person1, [“Oslo”, “Norway”]);

</script>

</body>

</html>

Output

JavaScript Functions

In HTML the value of this, in a global function, is the window object.

John Doe,Oslo,Norway

Compared with the call() method

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls the fullName method of person, using it on person1:

</p>

<p id=”demo”></p>

<script>

const person = {

  fullName: function(city, country) {

    return this.firstName + ” ” + this.lastName + “,” + city + “,” + country;

  }

}

const person1 = {

  firstName:”John”,

  lastName: “Doe”

}

const person2 = {

  firstName:”Mary”,

  lastName: “Doe”

}

document.getElementById(“demo”).innerHTML = person.fullName.call(person1, “Oslo”, “Norway”);

</script>

</body>

</html>

Output

JavaScript Functions

myObject.fullName() will return John Doe:

John Doe

The fullName method is a function. The function belongs to the object. myObject is the owner of the function.

The thing known as this is the object that “owns” the JavaScript code. In this case, the value of this is myObject.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>The value of <b>this</b>, in an object method, is the owner object.</p>

<p id=”demo”></p>

<script>

const myObject = {

  firstName:”John”,

  lastName: “Doe”,

  fullName: function() {

    return this;

  }

}

document.getElementById(“demo”).innerHTML = myObject.fullName();

</script>

</body>

</html>

Output

JavaScript Functions

This example calls the fullName method of person, using it on person1:

John Doe,Oslo,Norway

Simulate a Max Method on Arrays

Find the largest number (in a list of numbers) using the Math.max() method.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Math.max()</h2>

<p>This example returns the highest number in a list of number arguments:</p>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML = Math.max(1,2,3);

</script>

</body>

</html>

Output

JavaScript Math.max()

This example returns the highest number in a list of number arguments:

3

As JavaScript arrays do not contains a max() method, so you can apply the Math.max() method instead.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript apply()</h2>

<p>This example returns the highest number in an array of numbers:</p>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML = Math.max.apply(null, [1,2,3]);

</script>

</body>

</html>

Output

JavaScript apply()

This example returns the highest number in an array of numbers:

3