Invoke Function with Partial Arguments in JavaScript

JavaScript functions can be invoked with or without arguments. When invoked with arguments, the function is executed with the arguments passed in as values. When invoked without arguments, the function is executed with no arguments passed in.

In some cases, it is desirable to invoke a function with some arguments, but not all of them. This can be accomplished by using the Function.prototype.apply method, or by using the spread operator ( ... ).

Using the Function.prototype.apply Method

The Function.prototype.apply method can be used to invoke a function with some arguments, but not all of them. The first argument to the apply method is the this value, followed by an array of arguments to be passed to the function.

Syntax

apply(thisArg)
apply(thisArg, argsArray)

Parameters

  • thisArg ? The value of this provided for the call to the function. The null and undefined will be replaced with global, and primitive values will be converted to objects if the function is not in strict mode.

  • argsArray Optional ? xAn array?like object, specifying the arguments with which function should be called, or null or undefined if no arguments should be provided to the function.

Example

For example, consider the following code ?


<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      document.getElementById("result").innerHTML = add.apply(null, [1, 2])
   </script>
</body>
</html>

The this value is passed as the first argument to the apply method, and the array of arguments is passed as the second argument. The function is invoked with the this value and the arguments passed in as values.

The Function.prototype.apply method is a powerful way to invoke a function with some arguments, but not all of them. By using the apply method, you can avoid having to hard?code the arguments that you want to pass to the function.

Using the spread Operator

The spread operator ( ... ) can be used to invoke a function with some arguments, but not all of them. The

spread operator expands an array of arguments into individual arguments.

For example, consider the following code ?


<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      document.getElementById("result").innerHTML = add(...[1, 2])
   </script>
</body>
</html>

The array of arguments is expanded into individual arguments, and the function is invoked with those arguments.

Using the bind() method

The Function.prototype.bind() method can be used to create a new function that invokes the original function with some arguments prepended.

For example, consider the following code?


<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      const add1 = add.bind(null, 1);
      document.getElementById("result").innerHTML = add1(2)
   </script>
</body>
</html>

The first argument to the bind method is the this value, and the remaining arguments are used as the arguments to the function when it is invoked. In this example, the this value is passed as null, and the value 1 is passed as the first argument to the add function.

The bind method returns a new function, which is invoked with the given arguments. In this example, the new function is invoked with the value 2, and the function add is invoked with the values 1 and 2.

JavaScript functions can be invoked with or without arguments. In some cases, it is desirable to invoke a function with some arguments, but not all of them. This can be accomplished by using the Function.prototype.apply method, or by using the spread operator ( ... ).

Updated on: 2022-09-14T07:38:05+05:30

144 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements