Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to invoke a function with partials prepended arguments in JavaScript?
JavaScript provides several ways to invoke functions with partial arguments prepended. This technique is particularly useful when you want to create specialized versions of existing functions or implement partial application patterns.
Using the bind() Method (Recommended)
The The The spread operator ( Use bind()
Syntax
function.bind(thisArg, arg1, arg2, ...)
Example
<!DOCTYPE html>
<html>
<head>
<title>Partial Application with bind()</title>
</head>
<body>
<div id="result"></div>
<script>
function multiply(a, b, c) {
return a * b * c;
}
// Create a function with first argument bound to 2
const multiplyBy2 = multiply.bind(null, 2);
// Create a function with first two arguments bound
const multiplyBy2And3 = multiply.bind(null, 2, 3);
document.getElementById("result").innerHTML =
"multiplyBy2(5, 10): " + multiplyBy2(5, 10) + "<br>" +
"multiplyBy2And3(4): " + multiplyBy2And3(4);
</script>
</body>
</html>
multiplyBy2(5, 10): 100
multiplyBy2And3(4): 24
Using Function.prototype.apply()
apply() method invokes a function with a specific this value and arguments provided as an array. While not creating partial functions directly, it can be used to invoke functions with predefined argument arrays.Syntax
function.apply(thisArg, argsArray)
Example
<!DOCTYPE html>
<html>
<head>
<title>Using apply() for Argument Arrays</title>
</head>
<body>
<div id="result"></div>
<script>
function sum(a, b, c) {
return a + b + c;
}
const baseArgs = [10, 20];
const allArgs = [...baseArgs, 30];
const result = sum.apply(null, allArgs);
document.getElementById("result").innerHTML =
"sum.apply(null, [10, 20, 30]): " + result;
</script>
</body>
</html>
sum.apply(null, [10, 20, 30]): 60
Using the Spread Operator
...) expands arrays into individual arguments, making it easy to combine partial arguments with additional ones.Example
<!DOCTYPE html>
<html>
<head>
<title>Partial Arguments with Spread Operator</title>
</head>
<body>
<div id="result"></div>
<script>
function greet(greeting, name, punctuation) {
return greeting + " " + name + punctuation;
}
const partialArgs = ["Hello", "John"];
// Using spread to invoke with partial args
const result1 = greet(...partialArgs, "!");
const result2 = greet(...partialArgs, "?");
document.getElementById("result").innerHTML =
result1 + "<br>" + result2;
</script>
</body>
</html>
Hello John!
Hello John?
Comparison of Methods
Method
Creates New Function?
Best For
bind()Yes
Creating reusable partial functions
apply()No
One-time invocation with array arguments
Spread operator
No
Combining arrays with additional arguments
Conclusion
bind() for creating reusable functions with partial arguments. The spread operator works well for combining argument arrays, while apply() is useful for one-time invocations with array arguments.
237 Views
