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

JavascriptWeb DevelopmentFront End Technology

#### JavaScript for beginners

Best Seller

74 Lectures 10 hours

#### Modern Javascript for Beginners + Javascript Projects

Most Popular

112 Lectures 15 hours

#### The Complete Full-Stack JavaScript Course!

Best Seller

96 Lectures 24 hours

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>
<title>Examples</title>
<body>
<div id="result"></div>
<script>
return a + b;
}
</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>
<title>Examples</title>
<body>
<div id="result"></div>
<script>
return a + b;
}
function bind(fn, val) {
return function() {
return fn.apply(null, [val].concat(Array.prototype.slice.call(arguments)));
};
}