When and why to use Call and Apply?

Question

Firstly I came to know the difference between apply() and call().

function theFunction(name, profession) {
    alert("My name is " + name + " and I am a " + profession + ".");
}

theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]); // This call be called theFunction("Susan", "school teacher");, why use apply
theFunction.call(undefined, "Claude", "mathematician"); // This call be called theFunction("Claude", "mathematician");, why use call 

From the above code, all the 3 function call displays the alert message.

1. What are the advantages/disadvantages of using apply and call, over normal function call, and when is it appropriate to use apply/call, please clarify me.

2. One more thing, what if the function is a prototype based function:

Function.prototype.theFunction = function(name, profession) {

    alert("My name is " + name + " and I am a " + profession + ".");
}

Then how to call this function bu using apply or call. I tried this way:

theFunction.apply(undefined, ["Susan", "school teacher"]); 
theFunction.call(undefined, "Claude", "mathematician"); 

but resulted in error. "ReferenceError: theFunction is not defined"

Answer 1

As you have said it seems that you already know what these to functions apply() and call() actually do, but in terms of their uses, I'd say they are used mostly when you want to provide your function with a specific object of your own, as its this value in its context.

One of the most popular use of these two is to handle array-like objects like arguments objects in the function:

function(){
    //let's say you want to remove the first parameter from the arguments object

    //you can make sure that
    console.log(arguments instanceof Array);//false

    //as you see arguments is not an actual array object but it is something similar
    //and you want slice out its value
    var myparams = Array.prototype.slice.call(arguments, 1);

    //here you have myparams without your first argument

    console.log(arguments);
}

Let's go with another example. Say we have an independent function like:

function getName(){
    console.log(this.name);
}

Now you can use it for any kind of JavaScript object that has a name attribute:

var myInfo = {
    name: 'SAM'
};

now if you do:

getName.call(myInfo);

what it does is printing out the name attribute or you can try it on the function itself:

getName.call(getName);

which would print out the function's name ("getName") in the console.

But similar to my first example, it is usually used when you want to use functions that are not in the object's prototype chain. The other example of that could be:

//let's say you have an array
var myArray = [1 , 2];
//now if you use its toString function
console.log(myArray.toString());//output: "1,2"

//But you can use the Object toString funcion
//which is mostly useful for type checking
console.log(Object.prototype.toString.call(myArray));//output: "[object Array]"

Answer 2

This post gives a very detailed explanation of call() and apply().

TLDR;

Both call() and apply() are methods we can use to assign the this pointer for the duration of a method invocation

The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method.

Answer 3

The main difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly.

It Will Give You More Explaination POST