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

July 10 Last Year

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 we should know well by now, and as objects, functions have methods, including the powerful Apply, Call, and Bind methods. Apply and Call are nearly identical and they are used frequently in JavaScript for borrowing methods and explicitly setting the this value. We also use Apply for variable-arity functions. We use Bind for setting the this value in methods, in addition for Function Currying.


We will discuss all the scenarios in which these 3 methods are most often used in JavaScript. While Apply and Call are part of ECMAScript 3 (available on IE 6, 7, 8, and modern browsers), ECMAScript 5 (available only on 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

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

This might seem relatively trivial, but oftentimes 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 problem is that when we use the this keyword in methods, and we call said methods from a receiver object,
sometimes this is not bound to the object that we intended. And this results in errors in our code.

Before we look at the code for this section, it is imperative that we understand the this keyword in JavaScript. If you don’t already understand the “this” keyword in JavaScript, read my article, Understand JavaScript’s “this” With Clarity, and Master It, for if you don’t understand this thoroughly, you will have trouble understanding some of the concepts discussed below. In fact, most of the concepts regarding setting the “this” value that I discuss in this article I also discussed in the “Understand JavaScript’s this” article because the discussion of setting “this” is exemplified with Bind, Apply, and Call.

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


    When this button below is clicked, the text field is populated with a random name.

    //            <button>Get Random Person</button>
    //        <input type="text">
    
    
    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 on 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 intended.

    To fix this 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));

    Note that another way to fix the this value is that you can pass an anonymous callback function to the click () method and jQuery will bound this inside the anonymous function to the button object.

    Because the bind method was introduced in ECMAScript 5, it is unavailable in IE < 9 and Firefox 3.x.
    Here is an implementation that you can include in your code if you are targeting older browsers:

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

    Let's continue with the same example we have 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:

                // 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)
    
            

    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:

                // 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
            
  • 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:

                // 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.
                // We bind the user.showData method to the cars object we just created.
                cars.showData = user.showData.bind (cars);
                cars.showData (); // Honda Accord 14
    
            

    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, and we don't want to overwrite it accidentally. As we will see with Apply and Call (discussed next), it is best to borrow methods with either the Apply or Call methods.

  • 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 bind () method for currying. First we have a simple greet () function that accepts 3 parameters:

                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 + ".";
                    }
                }
            

    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 this value, as we discussed earlier:

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

    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. And 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.

  • 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 of the Apply and Call methods in JavaScript is probably to borrow functions. We can borrow functions with the Apply and Call methods as we did with the bind method, but in a more robust and versatile manner.

    Here are some 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 objects 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.

      It is important for me to 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:"Tomy", 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, gameController.scores);
                      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 and, 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, creating and executing variadic functions, and borrowing methods and functions. As a JavaScript developer, you would likely encounter and use these functions time and again. So be sure you understand them well.

Be good, imagine, and create.

Thanks for your time; please come back soon. Email me here: javascriptissexy at gmail email, or use the contact form.

48 Comments

  1. ECOVOX

    The bind from douglas crockford example is really hard to understand.

  2. You are awesome as usual! Thanks for your time!

  3. Pat

    I’ve learned a lot since I stumbled on this blog, thank you! Keep sharing.

  4. Robert

    great post thanks richard!

  5. Sri

    Ever since i have stumbled upon your blog, i must say that my JS concepts have improved a lot. You have unique ability to simplify things in such a way it is easy to grasp.

    Keep up the good work.. May be someday you should author a book :)

    • Sri, you are wonderful. Thanks for the wonderful words of encouragement.

      Keep up the good work.. May be someday you should author a book

      I am actually writing a book—more on it later ;)

  6. Thomas

    How come your articles dont appear in the “Javascript Weekly” news letter? Another well explained JS concept.

  7. Ritesh

    I learn something new every time i visit your blog. Thanks richard :)

  8. 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.

  9. Martin Felsin

    Could you please provide example using Microsoft Visual Basic 6. I think VB6 is more performant and powerful than the Java scripting language

  10. yougen

    thanks for this blog. When I read “borrow function”, I suddenly realize what Array.prototype.slice(arguments) really do, which confused me a long time. Ye, borrow is the key :)

    • yougen

      sorry, not Array.prototype.slice(argument), but Array.prototype.slice.apply(argument)

      • You are very welcome, Yougen. I am glad this article was helpful for you.

        • yougen

          Hi Richard,
          I find a tricky part when borrow method, I modify the code as following:
          var gameController = {
          scores: [20, 10, 60, 50]
          }

          var appController = {
          scores: [900, 300, 600, 400],
          avgScore: null,
          maxNum: function(){
          this.avgScore = Math.max.apply(null, this.scores);
          }
          }

          appController.maxNum.apply(gameController, gameController.scores);
          console.log(gameController.avgScore);// 60

          Since gameController does NOT have avsScore property,
          but it still works and get the result 60.

  11. charles

    Currying is not the same thing as partial function application.

  12. Hello Richard!

    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. :)

    Again, much thanks. Please keep up the great work on your blog!

    #!/watertype

    • HI Watertype,

      Thanks for taking the time to share this with the rest of the readers. It is very helpful. I take it you are referring to this function:

      
              function avg (arrayOfScores) {
                  // Add all the scores and return the total
                  var sumOfScores = arrayOfScores.reduce (function (prev, cur, index, array) {
                      return prev + cur;
                  });
      // ************* 
                  this.avgScore = sumOfScores / arrayOfScores.length;
              }
      
              var gameController = {
                  scores  :[20, 34, 55, 46, 77],
                  avgScore:null
              }
      

      To be clear, are you saying I need a return stament where I have this // *************

      If so, I can’t have the return statement there, or else the last line will never be reached. I am not sure why the code example had some error with REPL.

      What happens if you add the return statement after the line:
      this.avgScore = sumOfScores / arrayOfScores.length;
      // Put return here

      Does that work?

  13. Hello again Richard,

    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!

    In all, it’s clear to me now. Again, thanks!

    #!/watertype

  14. Leah

    Hi Richard,

    I think it will be useful, if you also explain the difference between apply/call method to bind method. I am very confused at beginning, however, I think I get it after searching online.

    bind() will actually return a function, not execute the function itself. However, apply/call will execute the borrowing function whenever you use it.

  15. Ruslan

    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!

  16. Tim

    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

  17. Long post but a good one. Here is another example of call() and apply() usage.

  18. Really good post, helped solidify understanding of great function methods. I’ve “tried” reading several popular js books and still feel slightly confused coming from Objective-C programming. The “this” keyword is a bugger but somehow your brainwaves connected to mine and this post made me understand it pretty decently. Thanks!

  19. Sabin

    I am confused about why the apply and call methods might be needed for getting the arguments.

    Can’t you do inside a function:
    var args = arguments;
    Instead of:
    var args = Array.prototype.slice.call(arguments);

  20. Roger T

    Hi Richard, love this website! I’d be lost in a sea of confusing and disparate tutorials without it :)

    Above you mention the following:

    “Note that another way to fix the this value is that you can pass an anonymous callback function to the click () method and jQuery will bound this inside the anonymous function to the button object.”

    I’m not exactly sure what you mean here. I came up with the following, but wanted to double check that I had conceptualized it right:

    $(‘button’).click(function() {
    var randomNum = Math.round(Math.random());
    alert(user.data[randomNum].name);
    })

    Thanks again for the incredible site!!!

    -r

  21. Savitha Gowda

    hi,

    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.

Trackbacks for this post

  1. Understand JavaScript’s “this” With Ease, and Master It | JavaScript is Sexy
  2. Understand JavaScript’s “this” With Clarity, and Master It | JavaScript is Sexy
  3. 16 JavaScript Concepts JavaScript Professionals Must Know Well | JavaScript is Sexy
  4. JavaScript’s Apply, Call, and Bind Method...
  5. JavaScript’s Apply, Call, and Bind Method...
  6. Learning javascript deeper « Maria.Blog.Shared

Leave a Comment