How to invoke a function with partials appended to the arguments in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In JavaScript, a function can be invoked by passing arguments to it. However, sometimes it is necessary to invoke a function with some arguments already filled in. This can be done using a technique called partial function application.

What is Partial Function Application?

Partial function application is a way to create a new function by "pre− filling" some of the arguments to an existing function. This is useful when you want to create a new function that is similar to an existing function, but with some arguments already set.

For example, say you have a function that calculates the area of a rectangle. This function takes two arguments− the width and the height of the rectangle.

Now say you want to create a new function that calculates the area of a square. This new function will be similar to the existing function, but it will only need one argument− the side of the square.

This is where partial function application comes in. You can use partial function application to create a new function that is a "partial" version of the existing function. This new function will have the first argument (the width) already set, and it will only need the second argument (the height).

How to Use Partial Function Application in JavaScript?

There are a few different ways to use partial function application in JavaScript.

Method 1

The most common way is to use the bind() method.

The bind() method is a way to create a new function from an existing function. The bind() method takes two arguments− the function to bind, and the value to bind to the first argument of the function.

For example, say you have the following function−

function add(a, b) { return a + b; }

You can use the bind() method to create a new function that has the first argument (a) already set.

var add5 = add.bind(null, 5);

Now the add5 function can be used like this−

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

As you can see, the first argument (5) is already set, and the second argument (10) is passed to the add5 function.

Method 2

Another way to use partial function application is to create a function that takes an existing function and a value, and returns a new function with the first argument of the existing function already set.

For example, you could write a function like this −

function bind(fn, val) { return function() { return fn.apply(null, [val].concat(Array.prototype.slice.call(arguments))); }; }

This function takes an existing function and a value, and returns a new function with the value bound to the first argument of the existing function.

For example, you could use the bind() function to create a new function like this −

var add5 = bind(add, 5);

Now the add5 function can be used like this−

<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> function add(a, b) { return a + b; } function bind(fn, val) { return function() { return fn.apply(null, [val].concat(Array.prototype.slice.call(arguments))); }; } var add5 = add.bind(add, 5); document.getElementById("result").innerHTML = add5(10) </script> </body> </html>

As you can see, the first argument (5) is already set, and the second argument (10) is passed to the add5 function.

Partial function application is a useful technique for creating new functions from existing functions. It can be used to create functions that are similar to existing functions, but with some arguments already set.

raja
Updated on 14-Sep-2022 07:33:47

Advertisements