JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

Prerequisite:
— Understand JavaScript’s “this” With Ease, and Master It.
— JavaScript Objects
— Understand JavaScript Closures
(This is an intermediate to advanced topic)

Duration: About 40 minutes.

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.

On the other hand, we use Bind for setting the this value in methods and for currying functions.

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">

// Get Random Person
//

var user = {
data :[
{name:”T. Woods”, age:37},
{name:”P. Mickelson”, age:43}
],
clickHandler:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) – 1; // random number between 0 and 1

    // This line is adding a random person from the data array to the text field
    $ ("input").val (this.data[randomNum].name + " " + this.data[randomNum].age);
}

}

// Assign an eventHandler to the button’s click event
$ (“button”).click (user.clickHandler);

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:

    <pre><code data-language="javascript">
        // Credit to Douglas Crockford for this bind method
        if (!Function.prototype.bind) {
            Function.prototype.bind = function (oThis) {
                if (typeof this !== "function") {
                    // closest thing possible to the ECMAScript 5 internal IsCallable function
                    throw new TypeError ("Function.prototype.bind - what is trying to be bound is not callable");
                }

                var aArgs = Array.prototype.slice.call (arguments, 1),
                        fToBind = this,
                        fNOP = function () {
                        },
                        fBound = function () {
                            return fToBind.apply (this instanceof fNOP && oThis
                                    ? this
                                    : oThis,
                                    aArgs.concat (Array.prototype.slice.call (arguments)));
                        };

                fNOP.prototype = this.prototype;
                fBound.prototype = new fNOP ();

                return fBound;
            };
        }
    </code></pre>

Let’s continue with the same example we used above. The this value is also bound to another object if we assign the method (where this is defined) to a variable. This demonstrates:

    <pre><code data-language="javascript">
        // This data variable is a global variable
        var data = [
            {name:"Samantha", age:12},
            {name:"Alexis", age:14}
        ]

        var user = {
            // local data variable
            data    :[
                {name:"T. Woods", age:37},
                {name:"P. Mickelson", age:43}
            ],
            showData:function (event) {
                var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1

                console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
            }

        }

        // Assign the showData method of the user object to a variable
        var showDataVar = user.showData;

        showDataVar (); // Samantha 12 (from the global data array, not from the local data array)

    </code></pre>

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.

    Let's use the <em>bind ()</em> method for currying. First we have a simple greet () function that accepts 3 parameters:

    <pre><code data-language="javascript">
        function greet (gender, age, name) {
            // if a male, use Mr., else use Ms.
            var salutation = gender === "male" ? "Mr. " : "Ms. ";

            if (age > 25) {
                return "Hello, " + salutation + name + ".";
            }
            else {
                return "Hey, " + name + ".";
            }
        }
    </code></pre>

    And we use the bind () method to curry (preset one or more of the parameters) our greet () function. The first argument of the bind () method sets the <em>this</em> value, as we discussed earlier:
    <pre><code data-language="javascript">
    // So we are passing null because we are not using the "this" keyword in our greet function.
    var greetAnAdultMale = greet.bind (null, "male", 45);

    greetAnAdultMale ("John Hartlove"); // "Hello, Mr. John Hartlove."

    var greetAYoungster = greet.bind (null, "", 16);
    greetAYoungster ("Alex"); // "Hey, Alex."
    greetAYoungster ("Emma Waterloo"); // "Hey, Emma Waterloo."
    </code></pre>

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:

  
          // global variable for demonstration
          var avgScore = "global avgScore";
  
          //global function
          function avg (arrayOfScores) {
              // Add all the scores and return the total
              var sumOfScores = arrayOfScores.reduce (function (prev, cur, index, array) {
                  return prev + cur;
              });
  
              // The "this" keyword here will be bound to the global object, unless we set the "this" with Call or Apply
              this.avgScore = sumOfScores / arrayOfScores.length;
          }
  
          var gameController = {
              scores  :[20, 34, 55, 46, 77],
              avgScore:null
          }
  
          // If we execute the avg function thus, "this" inside the function is bound to the global window object:
          avg (gameController.scores);
          // Proof that the avgScore was set on the global window object
          console.log (window.avgScore); // 46.4
          console.log (gameController.avgScore); // null
  
          // reset the global avgScore
          avgScore = "global avgScore";
  
          // To set the "this" value explicitly, so that "this" is bound to the gameController,
          // We use the call () method:
          avg.call (gameController, gameController.scores);
  
          console.log (window.avgScore); //global avgScore
          console.log (gameController.avgScore); // 46.4
  
      

  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.

  Use Call or Apply To Set this in Callback Functions
  I borrowed this little section from my article, Understand JavaScript Callback Functions and Use Them.

  
      // 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;
      }
      }
  

  
          function getUserInput (firstName, lastName, callback, callbackObj) {
              // The use of the Apply method below will set the "this" value to callbackObj
              callback.apply (callbackObj, [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 Methods
    Arrays 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:

    
                    // An array-like object: note the non-negative integers used as keys
                    var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };
                

    Now, if wish to use any of the common Array methods on our object, we can:

    
                    // Make a quick copy and save the results in a real array:
                    // First parameter sets the "this" value
                    var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);
    
                    console.log (newArray); // ["Martin", 78, 67, Array[3]]
    
                    // Search for "Martin" in the array-like object
                    console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true
    
                    // Try using an Array method without the call () or apply ()
                    console.log (anArrayLikeObj.indexOf ("Martin") === -1 ? false : true); // Error: Object has no method 'indexOf'
    
                    // Reverse the object:
                    console.log (Array.prototype.reverse.call (anArrayLikeObj));
                    // {0: Array[3], 1: 67, 2: 78, 3: "Martin", length: 4}
    
                    // Sweet. We can pop too:
                    console.log (Array.prototype.pop.call (anArrayLikeObj));
                    console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, length: 3}
    
                    // What about push?
                    console.log (Array.prototype.push.call (anArrayLikeObj, "Jackie"));
                    console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, 3: "Jackie", length: 4}
                

    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:

    
                    var gameController = {
                        scores  :[20, 34, 55, 46, 77],
                        avgScore:null,
                        players :[
                            {name:"Tommy", playerID:987, age:23},
                            {name:"Pau", playerID:87, age:33}
                        ]
                    }
    
                    var appController = {
                        scores  :[900, 845, 809, 950],
                        avgScore:null,
                        avg     :function () {
    
                            var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
                                return prev + cur;
                            });
    
                            this.avgScore = sumOfScores / this.scores.length;
                        }
                    }
    
                    // Note that we are using the apply () method, so the 2nd argument has to be an array
                    appController.avg.apply (gameController);
                    console.log (gameController.avgScore); // 46.4
    
                    // appController.avgScore is still null; it was not updated, only gameController.avgScore was updated
                    console.log (appController.avgScore); // null
                

    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:

  
          appController.maxNum = function () {
              this.avgScore = Math.max.apply (null, this.scores);
          }
  
          appController.maxNum.apply (gameController, gameController.scores);
          console.log (gameController.avgScore); // 77
      

  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:

    createAccount (arrayOfItems[0], arrayOfItems[1], arrayOfItems[2], arrayOfItems[3]);

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:

    var allNumbers = [23, 11, 34, 56];
    // We cannot pass an array of numbers to the the Math.max method like this
    console.log (Math.max (allNumbers)); // NaN

This is where the apply () method helps us execute variadic functions. Instead of the above, we have to pass the array of numbers using apply () thus:

    var allNumbers = [23, 11, 34, 56];
    // Using the apply () method, we can pass the array of numbers:
    console.log (Math.max.apply (null, allNumbers)); // 56

As we have learned earlier, the fist argument to apply () sets the “this” value, but “this” is not used in the Math.max () method, so we pass null.

Here is an example of our own variadic function to further illustrate the concept of using the apply () method in
this capacity:

    var students = ["Peter Alexander", "Michael Woodruff", "Judy Archer", "Malcolm Khan"];

    // No specific parameters defined, because ANY number of parameters are accepted
    function welcomeStudents () {
        var args = Array.prototype.slice.call (arguments);

        var lastItem = args.pop ();
        console.log ("Welcome " + args.join (", ") + ", and " + lastItem + ".");
    }

    welcomeStudents.apply (null, students);
    // Welcome Peter Alexander, Michael Woodruff, Judy Archer, and Malcolm Khan.

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.

Be Good. Imagine. Create.

[sc:mongodb-book]