JavaScript - Bind, Call, Apply
Tags: javascript, beginners, webdev
Published: 2019-03-21 13:13:13

---
title: JavaScript - Bind, Call, Apply
published: true
description: 
tags: javascript,beginners,webdev 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/thrqlsvievp290489p93.png
canonical_url: https://www.2n.pl/blog/javascript-part-20
---
*That's actually a 20 part of blog posts series ["JavaScript for beginners"](https://www.2n.pl/blog?tag=JavaScript+for+beginners_) created by our dev Bartosz. All of the parts are available at [2n.pl](https://www.2n.pl/blog).*

The function is a special type of object and has several properties. We already discussed it in one of the [previous parts](https://www.2n.pl/blog/javascript-part-14). To better understand what we are going to deal with today, let's start with an example.

[![](https://thepracticaldev.s3.amazonaws.com/i/npn3gskylh0ngo3dgc14.png)](https://www.2n.pl/blog)

After invoking a function, we will receive:

![](https://thepracticaldev.s3.amazonaws.com/i/lz1gfcp0dh3myqxsx2pp.png)

What's wrong here?
Of course, the fact that in invoking the *logName* function, the JavaScript engine does not see the *getFullName* method, which is assigned to the *person* object. In that case, wouldn't it be nice and pleasant to have such access?

#**bind**

[![](https://thepracticaldev.s3.amazonaws.com/i/t6e7e8yks3w8z0ojaf1s.png)](https://www.2n.pl/blog)

In the example above, we used the *bind* function.

Thanks to this function, all we did was that we combined Function Expression *logName* with the *person* Object, and the whole thing was saved in the *logPersonName* variable. But how does it really work? Well, the bind function creates a new copy of the *logName* function. By passing the object, *person*, we have an influence on what we want our copy to "combine" with. The *this* variable in the *logName* Function Expression will refer to the object that we passed. As it is really only a copy, we can invoke it, as we do in the eighteenth line.

As you can see, this is quite useful when you want to access the object in a function outside that object.

#**call**

This function is very similar to the *bind*.

[![](https://thepracticaldev.s3.amazonaws.com/i/iin74zob4tp6q8r7igt0.png)](https://www.2n.pl/blog)

As you can see, we called the *call* function on *logName* and passed the person. The result will be identical but in this case, no copy of the *logName* function is created, but the *logName* function itself is invoked. In fact, *logName.call* is the same as *logName()*, which is invoking a function. However, using the *call* function we have a greater ability to influence what we want to achieve, we have an influence on whether *this* variable is. Of course, we can also pass two arguments to the parameters *part1* and *part2*.

[![](https://thepracticaldev.s3.amazonaws.com/i/an7z8a856dd1sy0ej7u7.png)](https://www.2n.pl/blog)

![](https://thepracticaldev.s3.amazonaws.com/i/zuvpthc5bjdsgx9lbi76.png)

#**apply**

[![](https://thepracticaldev.s3.amazonaws.com/i/8al3r818fwuddugvryzl.png)](https://www.2n.pl/blog)

Here we have another function that is similar to the rest. Using it, we also control what the special variable *this* is supposed to be, but we pass the arguments in an array. Probably now the question comes to mind, what is the actual use of it in real life?

The first case is the so-called *function borrowing*.

[![](https://thepracticaldev.s3.amazonaws.com/i/czm9fd3g6dkvacdscfkq.png)](https://www.2n.pl/blog)

![](https://thepracticaldev.s3.amazonaws.com/i/t2xfh77frqthtm7hr360.png)

Here you can observe that despite using the *getFullName* method on the person object, we received *"Tom Goe"*. This is because we have manipulated what the special variable *this* is. As the return value from the *getFullName* method is the variable *fullName*, and in it, we indicate through variable this that *firstName* and *lastName* are to refer to the object on which it is called.

The next case is the *function currying*.

[![](https://thepracticaldev.s3.amazonaws.com/i/kzo8lg5ellcvzbfs5siy.png)](https://www.2n.pl/blog)

This example is related to *bind*, because then a copy of the function is created.

It is also not complicated. In the *bind* function, first of all, we pass to what the special variable *this* is supposed to refer to. Then we set permanently what will be the first parameter, in our case *a*. As the result *a * b* is returned, and *a* is always equal 2. At the time of the invocation of the function, we give only what *b* parameter should be equal to.

[![](https://thepracticaldev.s3.amazonaws.com/i/b0dp0601tex6uumkeird.png)](https://www.2n.pl/blog)

Of course, if we passed 10 instead of 5, we would get 20. And so on :).