JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Function apply() Method
Function apply() Method
The Function apply() method in JavaScript allows us to invoke a function given a specific value for this and arguments provided as an array.
The Function call() and apply() methods are very similar, but the main difference between them is function apply() method takes a single array containing all function arguments, and the function call() method takes individual arguments.
Same as the Function call() method, we can use the apply() method to manipulate the this value and can assign an orbitrary object to this.
Syntax
The syntax of the Function apply() method in JavaScriot is as follows
func.apply(thisArg, [arg1, arg2, ... argN]);
Parameters
thisArg − The 'thisArg' grument represents the function context. It is an object whose properties are needed to access the reference function using the 'this' keyword.
[arg1, arg2, ... argN] − They are arguments to pass to the function.
Return value
It returns the resultant value returned from the function.
Examples
Let's understand JavaScript Function apply() method with the help of some examples.
Using apply() method without passing argument
In the below code, we have defined the test() function printing the message in the output.
We invoked the function in a standard way and used the apply() method without passing any argument to invoke the function. The output shows that the apply() method gives the same output as a normal function call.
<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output1"> </p>
  <p id = "output2"> </p>
  <script>
    function test() {
      return "The function test is invoked!";
    }
    document.getElementById("output1").innerHTML = test();
    document.getElementById("output2").innerHTML = test.apply();
  </script>
</body>
</html>
Output
The function test is invoked!
The function test is invoked!
Using apply() method with this argument only
In the below code, the 'car' object contains three different properties. We passed the car object as a 'thisArg' argument of the apply() method.
In the showCar() function, we access the properties of the car object using the 'this' keyword and print it into the output.
<html>
<head>
  <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output"> </p>
  <script>
    function showCar() {
      return "The price of the " + this.name + " " + 
        this.model + " is: " + this.price;
    }
    let car = {
      name: "OD",
      model: "Q6",
      price: 10000000,
    }
    document.getElementById("output").innerHTML = showCar.apply(car);
  </script>
</body>
</html>
Output
The price of the OD Q6 is: 10000000
Using apply() method with an array of function arguments
In the example below, we pass the nums object as the first argument of the apply() method. After that, we pass the array of arguments as an apply() method's argument.
In the printSum() function, we access the object properties using the 'this' keyword and function arguments using the function parameters.
<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
<p id = "output"> </p>
<script>
﻿
    function printSum(p1, p2) {
      return this.num1 + this.num2 + p1 + p2;
    }
﻿
    const nums = {
      num1: 5,
      num2: 10,
    }
﻿
    const ans = printSum.apply(nums, [40, 32]);
    document.getElementById("output").innerHTML = "Total sum is " + ans;
</script>
</body>
</html>
Output
Total sum is 87
Using apply() method with built-in functions
You can also use the apply() method with built-in object methods. We can invoke the built-in object methods (such as Math.max or Math.min) using apply() method.
In the example below, we use apply() method with built-in JavaScript functions - Math.max and Math.min. We can't directly use these methods for the arrays. We invoke the Math.max and Math.min methods using apply() method. We pass null as thisArg and the array of five integers as the function argument.
<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
<p id = "output-max"> Max element in the array: </p>
<p id = "output-min"> Max element in the array:</p>
<script>
﻿
  const numbers = [7, 6, 4, 3, 9];
﻿
  document.getElementById("output-max").innerHTML += Math.max.apply(null, numbers);
﻿
  document.getElementById("output-min").innerHTML += Math.min.apply(null, numbers);
﻿
</script>
</body>
</html>
Output
Max element in the array: 9
Max element in the array:3
Notice if you use Math.max() or Math.min() methods directly for arrays to find max or min element in the array, the result will be NaN.
﻿
﻿
﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Function apply() Method

Function apply() Method

Syntax

Parameters

Return value

Examples

Using apply() method without passing argument

Output

Using apply() method with this argument only

Output

Using apply() method with an array of function arguments

Output

Using apply() method with built-in functions

Output