`Function.bind` is useful for more than locking down the `this` context when calling a function. This lesson shows how `Function.bind` can be used to make a new function with pre-specified initial arguments. This is a simple example of a functional programming technique called partial application which allows the remaining arguments to be specified when the new function is called.

https://app.egghead.io/api/v1/lessons/javascript-partial-application-with-function-bind/subtitles

Partial Application with Function.bind

[00:00] The most common use of function.bind is to lock down the this context that will be used when the function is run.

[00:07] If we have a function like this called saymyname that is written in a most unfortunate way, where it's going to return the title and name properties from the this object -- side note, do not write code like this -- we can specify the object that this will refer to within that function by calling saymyname.bind and then passing in the object that we want it to use.

[00:31] The first argument to bind is the this context. Calling function.bind actually returns a new function, so we'll need to add a pair of parentheses here to call our new function. There we see mrben logged out to the console.

[00:47] This is a little bit hard to read, so let's go ahead and pull this out. We'll actually create a new property called saymrben that is this function, and then we can come down here and update it, and say mrben with our parentheses there, and we get the same output.

[01:02] A better way to write the original function here is to have the title and name arguments actually passed in. We'll create a new function here called saysomename, where title and name get passed in. Then we just return those things stuck together with a space like before. To call this new function, we simply pass in the title and name that we want it to use.

[01:22] We'll add one more call here, where we pass in mrs and hannah, so we've got our nice general purpose function here that works just fine. Just because this function doesn't rely on a this context doesn't mean that function.bind isn't useful.

[01:36] Another capability of function.bind is that you can define arguments that will be prepended to any arguments passed to the new function. You can actually create a version of the function where some of the initial parameters have already been defined.

[01:51] We have our two calls to say some name here, but maybe we want individual functions for mr and mrs. We'll come up here and create a constant called saymr, and we're going to assign this saysomename.bind.

[02:07] Then we're going to pass in null for the first argument because we don't care about the this context, but then we're going to specify mr as the second parameter. That's essentially going to put a function in the saymrconstant that already has that title argument specified.

[02:24] We can also create a saymrs function by doing the same exact thing and just changing that argument that we bind to it. Now we can update these calls so that we use saymr and saymrs. Then we simply pass in the names, and we get the same output.

[02:40] Again, when we pass in mr here and mrs here as our second argument to function.bind, we're actually setting the first argument to saysomename. The first argument is the this context, and then after that are parameters that will be prepended to any arguments passed to the bound function.

[02:59] It can even be useful sometimes to pre-bind all of the arguments to a function so that it's just a simple reference that can be passed around and called just by appending the parentheses. We can create a saymrshannah constant here by calling saysomeone.bind, passing in null for the context again, but then specifying mrs and hannah there. We're pre-specifying both title and name.

Partial Application with Function.bind

Share this video with your friends