Functions are objects in JavaScript, as you should know by now, if you have read any of the prerequisite articles. And as objects, functions have methods, including the powerful Apply, Call, and Bind methods. On the one hand, Apply and Call are nearly identical and are frequently used in JavaScript for borrowing methods and for setting the this value explicitly. We also use Apply for variable-arity functions; you will learn more about this in a bit.

Can a Single JavaScript Course Make You Richer?

This Single JavaScript Course Can Get You a Bigger Salary(4 courses in 1—available as a single course for the first time)

Becoming a JavaScript Expert

Learn almost the entire
JavaScript language, advanced JavaScript programming, software engineering for web programmers, and more

21 comprehensive major subjects and over 200 of the most important concepts covered (plus a bonus advanced course)

Over 40 exercises and more than three dozen
projects and applications
(Watching and/or reading JavaScript [JS] tutorials alone won't help you advance your programming career; you need to build real JS projects and applications as you learn. These exercises, projects, and applications are the most important part of your JS training. They will advance your JS confidence and skills and your overall programming and software engineering skills.)

Every concept covered in depth and with clarity (if you don't understand something, we will
update
the course accordingly to add more clarity)

We will discuss every scenario in which we use these three methods in JavaScript. While Apply and Call come with ECMAScript 3 (available on IE 6, 7, 8, and modern browsers), ECMAScript 5 (available on only modern browsers) added the Bind method. These 3 Function methods are workhorses and sometimes you absolutely need one of them. Let’s begin with the Bind method.

JavaScript’s Bind Method

We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.

This might seem relatively trivial, but often the this value in methods and functions must be set explicitly when you need a specific object bound to the function’s this value.

The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications. Don’t worry if you don’t fully comprehend the preceding sentence. It will become clear like teardrop in a moment.

Before we look at the code for this section, we should understand the this keyword in JavaScript. If you don’t already understand this in JavaScript, read my article, Understand JavaScript’s “this” With Clarity, and Master It. If you don’t understand this well, you will have trouble understanding some of the concepts discussed below. In fact, many of the concepts regarding setting the “this” value that I discuss in this article I also discussed in the Understand JavaScript’s “this” article.

JavaScript’s Bind Allows Us to Set the this Value on Methods

When the button below is clicked, the text field is populated with a random name.
<pre><code data-language="javascript">

When you click the button, you get an error because this in the clickHandler () method is bound to the button HTML element, since that is the object that the clickHandler method is executed on.

This particular problem is quite common in JavaScript, and JavaScript frameworks like Backbone.js and libraries like jQuery automatically do the bindings for us, so that this is always bound to the object we expect it to be bound to.

To fix the problem in the preceding example, we can use the bind method thus:
Instead of this line:

$ ("button").click (user.clickHandler);

We simply have to bind the clickHandler method to the user object like this:

$ ("button").click (user.clickHandler.bind (user));

Consider this other way to fix the this value: You can pass an anonymous callback function to the click () method and jQuery will bind this inside the anonymous function to the button object.

Because ECMAScript 5 introduced the Bind method, it (Bind) is unavailable in IE < 9 and Firefox 3.x.
Include this Bind implementation in your code, if you are targeting older browsers:

When we execute the showDataVar () function, the values printed to the console are from the global data array, not the data array in the user object. This happens because showDataVar () is executed as a global function and use of this inside showDataVar () is bound to the global scope, which is the window object in browsers.

Again, we can fix this problem by specifically setting the “this” value with the bind method:

<pre><code data-language="javascript">
// Bind the showData method to the user object
var showDataVar = user.showData.bind (user);
// Now the we get the value from the user object because the this keyword is bound to the user object
showDataVar (); // P. Mickelson 43
</code></pre>

Bind () Allows us to Borrow Methods

In JavaScript, we can pass functions around, return them, borrow them, and the like. And the bind () method makes it super easy to borrow methods.

Here is an example using bind () to borrow a method:

<pre><code data-language="javascript">
// Here we have a cars object that does not have a method to print its data to the console
var cars = {
data:[
{name:"Honda Accord", age:14},
{name:"Tesla Model S", age:2}
]
}
// We can borrow the showData () method from the user object we defined in the last example.
// Here we bind the user.showData method to the cars object we just created.
cars.showData = user.showData.bind (cars);
cars.showData (); // Honda Accord 14
</code></pre>

One problem with this example is that we are adding a new method (showData) on the cars object and we might not want to do that just to borrow a method because the cars object might already have a property or method name showData. We don’t want to overwrite it accidentally. As we will see in our discussion of Apply and Call below, it is best to borrow a method using either the Apply or Call method.

JavaScript’s Bind Allows Us to Curry a Function

Function Currying, also known as partial function application, is the use of a function (that accept one or more arguments) that returns a new function with some of the arguments already set. The function that is returned has access to the stored arguments and variables of the outer function. This sounds way more complex than it actually is, so let’s code.

When we use the bind () method for currying, all the parameters of the greet () function, except the last (rightmost) argument, are preset. So it is the rightmost argument that we are changing when we call the new functions that were curried from the greet () function. Again, I discuss currying at length in a separate blog post, and you will see how we can easily create very powerful functions with Currying and Compose, two Functional JavaScript concepts.

So, with the bind () method, we can explicitly set the this value for invoking methods on objects, we can borrow
and copy methods, and assign methods to variable to be executed as functions. And as outlined in the Currying Tip
earlier,
you can use bind for currying.

JavaScript’s Apply and Call Methods

The Apply and Call methods are two of the most often used Function methods in JavaScript, and for good reason: they allow us to borrow functions and set the this value in function invocation. In addition, the apply function in particular allows us to execute a function with an array of parameters, such that each parameter is passed to the function individually when the function executes—great for variadic functions; a variadic function takes varying number of arguments, not a set number of arguments as most functions do.

Set the this value with Apply or Call

Just as in the bind () example, we can also set the this value when invoking functions by using the Apply or Call methods. The first parameter in the call and apply methods set the this value to the object that the function is invoked upon.

Here is a very quick, illustrative example for starters before we get into more complex usages of Apply and Call:

Note that the first argument to call () sets the this value. In the preceding example, it is set to
the gameController object. The other arguments after the first argument are passed as parameters to the
avg () function.

The apply and call methods are almost identical when setting the this value except that you pass the function parameters to apply () as an array, while you have to list the parameters individually to pass them to the call () method. More on this follows. Meanwhile, the apply () method also has another feature that the call () method doesn’t have, as we will soon see.

// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
id: 094545,
fullName: "Not Set",
// setUserName is a method on the clientData object
setUserName: function (firstName, lastName) {
// this refers to the fullName property in this object
this.fullName = firstName + " " + lastName;
}
}

The Apply method sets the this value to callbackObj. This allows us to execute the callback function with the this value set explicitly, so the parameters passed to the callback function will be set on the clientData object:

// The clientData object will be used by the Apply method to set the "this" value
getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama

The Apply, Call, and Bind methods are all used to set the this value when invoking a method, and they do it in slightly different ways to allow use direct control and versatility in our JavaScript code. The this value in JavaScript is as important as any other part of the language, and we have the 3 aforementioned methods are the essential tools to setting and using this effectively and properly.

Borrowing Functions with Apply and Call (A Must Know)

The most common use for the Apply and Call methods in JavaScript is probably to borrow functions. We can borrow functions with the Apply and Call methods just as we did with the bind method, but in a more versatile manner.

Consider these examples:

Borrowing Array MethodsArrays come with a number of useful methods for iterating and modifying arrays, but unfortunately, Objects do not have as many native methods. Nonetheless, since an Object can be expressed in a manner similar to an Array (known as an array-like object), and most important, because all of the Array methods are generic (except toString and toLocaleString), we can borrow Array methods and use them on objects that are array-like.

An array-like object is an object that has its keys defined as non-negative integers. It is best to specifically add a length property on the object that has the length of the object, since the a length property does not exist on objects it does on Arrays.

I should note (for clarity, especially for new JavaScript developers) that in the following examples, when we call Array.prototype, we are reaching into the Array object and on its prototype (where all its methods are defined for inheritance). And it is from there—the source—that we are borrowing the Array methods. Hence the use of code like Array.prototype.slice—the slice method that is defined on the Array prototype.

Let’s create an array-like object and borrow some array methods to operate on the our array-like object. Keep in mind the array-like object is a real object, it is not an array at all:

We get all the great benefits of an object and we are still able to use Array methods on our object, when we setup our object as an array-like object and borrow the Array methods. All of this is made possible by the virtue of the call or apply method.

The arguments object that is a property of all JavaScript functions is an array-like object, and for this reason, one of the most popular uses of the call () and apply () methods is to extract the parameters passed into a function from the arguments object.

Here is an example I took from the Ember.js source, with comments I added:

function transitionTo (name) {
// Because the arguments object is an array-like object
// We can use the slice () Array method on it
// The number "1" parameter means: return a copy of the array from index 1 to the end. Or simply: skip the first item
var args = Array.prototype.slice.call (arguments, 1);
// I added this bit so we can see the args value
console.log (args);
// I commented out this last line because it is beyond this example
//doTransition(this, name, this.updateURL, args);
}
// Because the slice method copied from index 1 to the end, the first item "contact" was not returned
transitionTo ("contact", "Today", "20"); // ["Today", "20"]

The args variable is a real array. It has a copy of all the parameters passed to the transitionTo function.

From this example, we learn that a quick way to get all the arguments (as an array) passed to a function is to do:

// We do not define the function with any parameters, yet we can get all the arguments passed to it
function doSomething () {
var args = Array.prototype.slice.call (arguments);
console.log (args);
}
doSomething ("Water", "Salt", "Glue"); // ["Water", "Salt", "Glue"]

We will discuss how to use the apply method with the arguments array-like object again for variadic functions. More on this later.

Borrowing String Methods with Apply and Call
Like the preceding example, we can also use apply () and call () to borrow String methods. Since Strings are immutable, only the non-manipulative arrays work on them, so you cannot use reverse, pop and the like.

Borrow Other Methods and Functions
Since we are borrowing, lets go all in and borrow from our own custom methods and functions, not just from Array and String:

Sure, it is just as easy, even recommended, to borrow our own custom methods and functions. The gameController object borrows the appController object’s avg () method. The “this” value defined in the avg () method will be set to the first parameter—the gameController object.

You might be wondering what will happen if the original definition of the method we are borrowing changes. Will the borrowed (copied) method change as well, or is the copied method a full copy that does not refer back to the original method? Let’s answer these questions with a quick, illustrative example:

As expected, if we change the original method, the changes are reflected in the borrowed instances of that method. This is expected for good reason: we never made a full copy of the method, we simply borrowed it (referred directly to its current implementation).

Use Apply () to Execute Variable-Arity Functions

To wrap up our discussion on the versatility and usefulness of the Apply, Call, and Bind methods, we will discuss a neat, little feature of the Apply method: execute functions with an array of arguments.

We can pass an array with of arguments to a function and, by virtue of using the apply () method, the function will execute the
items in the array as if we called the function like this:

This technique is especially used for creating variable-arity, also known as variadic functions.
These are functions that accept any number of arguments instead of a fixed number of arguments. The arity of a function specifies the number of arguments the function was defined to accept.

The Math.max() method is an example of a common variable-arity function in JavaScript:

// We can pass any number of arguments to the Math.max () method
console.log (Math.max (23, 11, 34, 56)); // 56

But what if we have an array of numbers to pass to Math.max? We cannot do this:

Final Words

The Call, Apply, and Bind methods are indeed workhorses and should be part of your JavaScript repertoire for setting the this value in functions, for creating and executing variadic functions, and for borrowing methods and functions. As a JavaScript developer, you will likely encounter and use these functions time and again. So be sure you understand them well.

Hi Richard,
I enjoy your articles. I am 3 months into a bootcamp and learning a lot (but still have so far to go!) Anyway, do you recommend any javascript books? I am half way through, “Javascript, the Good Parts” and certain parts are still a little beyond me right now, you are right; although I will say that reading your articles after reading a chapter or two of the book really help to drive things home…but what’s a good book for me to start with? thank you again for the great articles!

Hi Richard,
I really love reading your articles and appreciate your work in here; even simple examples guide n00bies very well. Thank you and wish to see more of them.
I’ve got a question, in your greetAYoungster function you didnt define a second parameter so it should return “Hey, Ms. Alex.” instead of “Hey, Alex.” because “” (empty string) is falsey i guess.

Emre, your suggestion that falsy will be the result from a nonexistent (or empty) parameter is correct. But in the example code, if the person’s age is 25 or younger, the salutation variable is not being used at all, so the returned result will always be without “Mr.” or “Ms.”

Thank you for illustrating the JS “ABC’s” so clearly. This explanation rounded out my understanding of each respective methods coming from Reginald Braithwaite’s JavaScript Allonge (definitely recommend if you haven’t checked it out already!).

I found a code ‘hiccup’ in one of your examples. As a note, I was working through most of the examples using the REPL available to Node v.10.20 and the Google Chrome Console Version 30.0.1599.101.

Within the section ‘Set the this value with Apply or Call,’ under your first code example, your global function ‘avg’ is missing the ‘return’ keyword before ‘this.avgScore = sumOfScores / arrayOfScores.length; .’ Without the ‘return’ keyword, I had a bunch of ‘undefined’ values pop up.

May you please update the code sample to include ‘return’ for future readers? If the function should work without the ‘return,’ I’d like to know more about why one could leave it out.

Thanks for the reply!
I realized that my interpretation of the intent of that code example was incorrect. Originally, I thought that the avg function was to immediately return the average value of a given array (if say calling console.log upon it). Looking at it again, the avg function was meant to update the `this` object’s avgScore, and then checking it with console.log().

I realized that the example was meant to show the `.call` method’s usage in different `this` contexts. So on my part, it was actually me with the code hiccup, haha!

Great article! it’s really clear and comprehensive with a few examples you’ve given. I’ve been searching for this kind of article to nail down the bind() method and additionally got 2 other methods;) Cool, thank you Richard!

Your articles are helpful and well explained. Thank you. But could I please ask you to remove any leading spaces from the lines in your code samples? (In future posts; I wouldn’t ask you to edit all the old ones.) Your layout is so narrow that the extra spaces at the beginning of each line make nearly every line of code wrap. It makes it harder to read your code. — Thanks

Can you please explain following concept: function currying at length in a separate blog post, and you will see how we can easily create very powerful functions with Currying and Compose, two Functional JavaScript concepts.

which blog i should check?? where have you explained??
i’m waiting for that. i learnt javascript because your blogs only thanks a lot. also please explain me for classical inheritance and prototyple inheritance in javascript.

You correctly note that this is bad practice, because the cars object might already have a showData method that we would be accidentally overwriting.

However, I’m not sure this counts as “borrowing.” Based on your later GameController example of borrowing, borrowing seems to be about invoking object A’s method within the context of object B, whereas this is declaring new methods in Object B.

Thus, to make the above a correct example of borrowing, shouldn’t it just end with:
user.showData.bind(cars)();
// must add () to the end, because bind() doesn’t auto-invoke, unlike apply().

NOT:
cars.showData = user.showData.bind (cars);
cars.showData ();

In which case, is there even a problem using bind()() to borrow? Granted it can’t take additional arguments like apply/call, so is more limited.

I understand how this example works. What I don’t get is why this is the example to answer the question “what will happen if the original definition of the method we are borrowing changes..” . I was expecting an example where the original method “avg” would be changed after the first time it was borrowed. The illustration above was using a new method, so I’m a little confused about the relevance to the question.

Hi! Wonderful blog post; thank you writing it! I have a question about the example given for currying function with the bind method.

In the function below, the arguments are listed in the order: gender, age, and name. So I assumed when the function was curried and saved to a variable, you would need to list the order of the arguments the same, meaning in var greetAnAdultMale = greet.bind (null, “male”, 45); the arguments would be (“male”, 45, null).

However, that is not the case in the example when greetAnAdultMale(“John Hartlove”) is called with a single parameter, it returns the function as “Hello, Mr. John Hartlove.”​ Why is this? How does the JS interpreter know that when the function is called, the argument given corresponds to the name parameter and is not overwriting the first argument (gender)?

This is the best site for javascript learning. Objects behaving like an array – Man! that’s pure genius. Till yesterday, I thought arguments object can access only length property, but not anymore.
Thanks Richard. I am indulging this newly acquired knowledge.

This was an immensely helpful post for me 😀 Took the time to read it all in one sitting and I’m very glad I did. The examples were really helpful and things were generally just written in a clear, concise way. Thank you so much for the great article 😀

A lot of the concepts covered here relate to things I’ve been reading about/practicing otherwise, and this sort of “completed” some of that knowledge for me. It’s a very cool feeling when that moment happens and you suddenly realize how far you’ve come from where you started.

Thanks for awesome article.. I have one question.
When we borrow methods using call and apply, doesn’t borrowed method added to the object for which we borrowed it?
like in bind, when we borrow method for particular object that method is added in that object.

Thank you for such a wonderfully simple explanations of js concepts!
I am active js developer with almost 2 years of ex. but I felt that my knowledge is more practical than theoretical one (not so easy to speak about it) kind of. Am preparing for work interview and thought I should sort some things out in my head. Your blog has REALLY helped me to do all that. Thanks a ton Richard!

// I get error as explained above. This is fine.
// $(‘#btn’).click(userController.clickHandler);

// Doubt: This works fine for me although i did not use bind to set this. 1 passed as argument is index.
// so, why I am not getting same error as above? How come passing 1 as argument is setting this object.
$(‘#btn’).click(userController.clickHandler(1));
});

I learnt a lot from your post Richard, thank you very much for being awesome and sharing your knowledge to the world like you do!
Now I can continue learning more about functional programming in Javasript

So, I was searching for a good source of javascript articles to reach the next level of development as I think I am already a intermediate/advanced javascript programmer, and then I found out your site. I really loved it, dude.
Well explained articles, with a lot of advanced stuff that I really did not understand at all, now I can.
Thanks and keep doing this great job.

(I am seriousely visually impaired, and thus more prone to webpage layout issues, which I think many websites don’t really pay attention to, although the Mozilla documentation clearly stresses this point over and over. These things are not obvious to most people – why should it, after all, if you see normally – but make reading very difficult for me.. and maybe other people too.. so here goes)

my eyes are struggling with the readability of your text, especially in the code examples.

two problems:

They sometimes look like they are ‘selected’, having this unneeded cluttering background color on the letters.
(e.g. the part where you explain ‘Here is an example I took from the Ember.js source, with comments..’ has this unneeded eye-wrecking selection-like letters-background , making the reading far more difficult. I think there is no special functional reason to do so, so I thought I’d mention it.).

Also.. the layout of the code examples is awkward: why do you indent them, just to find long single-line // comments wrapping-around and breaking up the typical scoped indentation? I understand the code examples are probably meant to be copy-pasted to a text editor for further experimentation anyways, but the formatting is quite terrible.
Why indent a complete block of text if there is no reasonable scope in sight that actually makes that necessary, snippet-wise? I don’t understand the functional advantage of that, but certainly recognize the visual problem.
The trouble is: I must follow letter by letter by hand, to be able to read my screen (my eyes have very limited resolution, so to speak… born that way, not fixable), and this unneeded word-wrapping messes up my short-term reading memory severely, if you see what I mean. I have to re-read it about five times to know which letters belong to which subject… arghh 😉

I don’t know how straining this indentation and word-wrapping it is for people that don’t have my visual impairment, but I reckon it would be interesting for them too, to just have fluent text without break-up.

Now I find myself copy-pasting it to an external text editor, just to get the formatting somewhat decent, which is rather time-consuming and unneeded in principle.

Also… If you would get rid of the huge, (IMHO) useless white space on the left and right of the webpage, you would have all the screenspace in the world for the actual articles, and there would be no need to word-wrap your comments, breaking up the readability flow of the source-code. On a normal monitor (widescreen is very common nowadays), you actually only use half of your screen space, which is a shame for the nearly-blind so to speak 😉

It first looked like broken CSS or something, but I checked it on various computers and browsers, and they all have the problem, I think it’s a choice in the layout.
For me, this makes this site almost unreadable, while I would be so glad to be able to read it all . I’ve been chewing on these articles for a few weeks now, since I really want to know their content, but I assure you it’s a challenge, just because of the layout.

… this comment is not to diminish the contents of your work (which I find excellent), but just to point out the layout and styling problems, which seeminly nobody else is mentioning. I have – so to speak – the doubtful honour of mentioning the elephant in the room (a bat-blind elephant as I am, probably 😉

Readability and good use of screenspace is important, I think. These articles would be much better without the visual strain!