Difference between call and apply in JavaScript

One of the very common thing which confuse you while writing JavaScript is knowing when to use “call” and when to use “apply”.

Let’s look at following example:

var person1 = {name: 'John', age: 52, size: '2X'};
var person2 = {name: 'Jane', age: 26, size: '5X'};

var sayHello = function(){
alert('Hello, ' + this.name);
};

var sayGoodbye = function(){
alert('Goodbye, ' + this.name);
};

sayHello();
sayGoodbye();

This will give errors or just unexpected results. This is because both functions rely on their scope for the “this.name” data and calling them without any explicit scope that will just run them in the scope of the current window.

So we scope them like below:

sayHello.call(person1);
sayGoodbye.call(person2);

sayHello.apply(person1);
sayGoodbye.apply(person2);

The above example run sayHello or sayGoodbye in the scope of either person1 or person2.
So, both “call” and “apply” perform very similar functions i.e. execute a function in the context or scope of the first argument which you pass to them.

Read Also:

• How to associate functions with objects using JavaScript?
• Tips and Tricks for powerful developers

The difference between “call” and “apply” is when you want to seed this call with a set of arguments. For example, make a prepare() method which is little more dynamic:

var prepare = function(greet){
alert(greet + ', ' + this.name);
};

prepare.call(person1, 'Hello');
prepare.call(person2, 'Goodbye');

It runs the function in the context of the first argument and subsequent arguments that are passed in to the function to work with.

So, both “call” and “apply” can be called on functions which they run in the context of the first argument. In “call” the subsequent arguments are passed into the function as they are, while “apply” expects the second argument to be an array that it unpacks as arguments for the called function.