JavaScript: Apply and Call Methods

In what follows we are going to look at 2 different JavaScript methods used when dealing with functions: apply and call. Apply and call are essentially used to call a function elsewhere in your code * using the arguments of another function as the arguments for calling that other function *. So if you were inside a function and needed to do some sort of process that figured out something about the arguments of your current function, you could use apply or call. The only real practical difference is that “apply” passes the arguments as a single array and “call” passes each of the arguments individually as separate arguments.

Let’s take a look at the following…

function calculateMyTotal(number1, number2){
    return number1 + number2;
}
function sumArguments1(num1, num2){
    return calculateMyTotal.apply(this, [num1, num2]);  //passing in array
}

Here you can see we have called the calculateMyTotal function and have used the arguments of the current function as the arguments to pass into another function. The “this” just means this current function — in this case, sumArguments1. Another powerful and useful feature of using the apply and call methods is the ability to change what the “this” pointer points to. When you use apply and call, “this” becomes the function/object you are passing into the apply and call methods. It may not be immediately apparent from our simple demonstrations, but it can be very useful if used properly in other instances.

So, getting back to our example, if we were to do…

sumArguments1(1,2);
sumArguments1(4,8)

The results would be 3 and 12.

Because JavaScript functions all have an arguments property (which is a sequential array-like object of the arguments passed into the function), you could just as easily say…

function sumArguments1 (num1, num2) {
    return calculateMyTotal.apply(this, arguments);    //passing in arguments object
}

You don’t even necessarily have to use apply on “this” current function. What if we had another function…

function favoriteNumbers(num1, num2) {
    return 'My favorite numbers are ' + num1 + ' and ' + num2;
} 

Now, elsewhere in your code, we could pass favoriteNumbers in as the function. You could say…

calculateMyTotal.apply(favoriteNumbers, [3,4]); // needs pass in array as 2nd argument 

This will give you 7 even though favoriteNumbers is a function that has nothing to do with adding 2 numbers together.

The call method is similar, but instead of using an array as the second argument, you have to use each argument individually. So if we were to do the same as our previous example we could do…

calculateMyTotal.call(favoriteNumbers, 3,4); // passing each number as a separate argument

Which will also give us 7. It’s the same result, but which one you want to use depends on what kind of function you are trying to pass into apply or call (or it might even come down to personal preference). Either way, you can see that you can use a function’s arguments and apply them to another function, or call another function using them.