Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to invoke a function with partials prepended 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 ( ... ).
102 Views
