JavaScript Function apply()
Method Reuse
Using the apply() method allows you to create a function that can be employed with various objects.
The JavaScript apply() Method
The apply() method is like the call() method, which was discussed in the previous chapter.
Here, the fullName function of the person is used on person1.
The Difference Between call() and apply()
The difference is:
The call() method accepts arguments individually.
The apply() method accepts arguments in the form of an array.
The apply() method is useful when you prefer using an array instead of a list of arguments.
The apply() Method with Arguments
The apply() method takes arguments in the form of an array.
In contrast to the call() method:
Simulate a Max Method on Arrays
To discover the biggest number in a list of numbers, you can utilize the Math.max() method.
JavaScript arrays don't come with a max() function, so you can use the Math.max() method instead.
The initial argument, which is set as "null," doesn't affect the outcome. In this example, it is not utilized.
The following examples will produce identical outcomes:
JavaScript Strict Mode
In JavaScript strict mode, when you use the apply() method, the first argument must be an object. If it's not an object, it will be considered as the owner (object) of the function that is called. In "non-strict" mode, if the first argument is not an object, it becomes the global object.
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example, the code uses the "fullName" function of an object named "person" and applies it to an instance called "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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.max()</h2>
<p>This sample finds the biggest number from a list of numbers provided:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max(1, 2, 3);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p> This sample shows how to find the largest number in a list of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(null, [1, 2, 3]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This code snippet finds the largest number in a list of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(Math, [1, 2, 3]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example shows how to find the biggest number in a list of numbers.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(" ", [1, 2, 3]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example shows how to find the largest number in a list of numbers.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(0, [1, 2, 3]);
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery