If you're looking for more information on the differences between function apply and function call in JavaScript, K. Scott Allen has written a detailed article that may be helpful.

In a nutshell, the main distinction lies in how they handle function arguments.

While both methods, call() and apply(), are quite similar, apply() specifically requires an array as its second parameter. This array serves as the list of arguments for the targeted method."

To illustrate:

// Assuming there is a function f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);

In terms of deciding when to utilize each function, the best approach is to use apply when the number of arguments is unknown or if they are already organized in an array or array-like object (such as the arguments object for passing your own arguments). Conversely, opt for call when there is no necessity to encapsulate the arguments within an array.

f.call(thisObject, a, b, c); // When arguments are fixed

f.apply(thisObject, arguments); // To pass on the function's arguments

var args = [];
while (...) {
    args.push(some_value());
}
f.apply(thisObject, args); // When the number of arguments is uncertain

If I am not passing any arguments (similar to your example), my preference leans towards using call because I am specifically calling the function. On the other hand, utilizing apply would suggest that you are applying the function to non-existent arguments.

In terms of performance, there may not be noticeable differences unless you use apply and enclose the arguments in an array (e.g. f.apply(thisObject, [a, b, c]) rather than f.call(thisObject, a, b, c)). While I have not conducted tests, it could potentially vary depending on the browser. It is likely that call is faster when arguments are not already in an array, whereas apply might be quicker when they are.

Remember this helpful mnemonic: Always remember that brushing your teeth is essential for good oral health. When you smile, show off those pearly whites!

Although the topic of .call vs .apply is not new, it is worth noting that .call tends to be slightly faster than .apply for reasons that are not entirely clear.

To see a comparison on jsPerf, visit http://jsperf.com/test-call-vs-apply/3

[UPDATE!]

In a brief mention by Douglas Crockford, he touches on the distinction between the two methods, shedding light on the performance gap... Check out this video: http://youtu.be/ya4UHuXNygM?t=15m52s

The key difference is that Apply takes an array of arguments, whereas Call accepts zero or more individual parameters! That explains it!

.apply(this, [...])

.call(this, param1, param2, param3, param4...)

Excerpt from Closure: The Definitive Guide by Michael Bolin coming up next! It's a bit long, but it's packed with valuable insights. Here's a snippet from "Appendix B. Frequently Misunderstood JavaScript Concepts":

Mysterious Behavior of 'this' in Function Calls

When you call a function like foo.bar.baz(), the object foo.bar becomes the receiver. In this case, the value of this inside the function will be the receiver:

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Outputs 30 because 'obj' is the context for 'this' when calling
// obj.addValues(), so obj.value now equals 10 + 20.
obj.addValues(20);

In cases where there's no explicit receiver during a function call, the global object steps in as the receiver. For instance, in a web browser environment, the global object is typically 'window'. This can lead to unexpected outcomes:

var f = obj.addValues;
// Results in NaN because 'window' is the context for 'this' in
// f() call. As window.value is undefined, adding a number leads to NaN.
f(20);
// Also adds a property to window unintentionally:
alert(window.value); // Displays NaN

Different behavior can occur even if two functions refer to the same method but have different receivers for 'this'. Therefore, it's crucial to ensure that 'this' references the correct value when executing a function. If 'this' isn't used within the function body, then both f(20) and obj.addValues(20) would produce similar results.

In JavaScript, functions are treated as objects and possess their own methods. Every function includes call() and apply(), allowing you to redefine the receiver ('this') during the function invocation. The methods look like this:

/**
* @param {*=} receiver to replace 'this'
* @param {...} parameters as function arguments 
*/
Function.prototype.call;
/**
* @param {*=} receiver to replace 'this'
* @param {Array} parameters as function arguments
*/
Function.prototype.apply;

Notice that the key difference between call() and apply() is how they handle arguments—individually or as an array:

// Invoking 'f' with 'obj' as its receiver behaves similarly to calling
// obj.addValues(). Both result in increasing obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

The following calls achieve the same outcome since 'f' and 'obj.addValues' point to the identical function:

obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

However, neither call() nor apply() uses its receiver value if not specified, causing issues like:

// Both expressions assess to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

'this' in a function call cannot be null or undefined. Passing them as receivers to call() or apply() prompts the global object as substitute. Consequently, the code above inadvertently appends 'value' to the global object.

Consider viewing a function as oblivious to the variable it's assigned to. This aids in recognizing that 'this' binds its value upon function execution rather than definition.

End of excerpt.

There are instances where one object can benefit from borrowing the function of another object, allowing the borrowing object to carry out the borrowed function as its own.

Here is a simple illustration using code:

var helper = {
    tool: false,
    borrowTool: function ( canBorrow ){
      this.tool = canBorrow;
 }

}; 

var user = {
    tool: false,
    hasTool: function(){
      return this.tool === true;
  }
};

console.log(user.hasTool()); // false

helper.borrowTool.call(user, true); 

console.log(user.hasTool()); // true

helper.borrowTool.apply(user, [false]);

console.log(user.hasTool()); // false

These techniques prove to be valuable in granting objects temporary capabilities.

Here's another illustration showcasing the usage of Call, Apply, and Bind methods. While the distinction between Call and Apply is clear, Bind operates in the following manner:

1. Bind generates an instance of a function that can be executed
2. The first parameter is 'this'
3. The second parameter is a Comma separated list of arguments (similar to Call)

}

function Person(name) {
    this.name = name; 
}
Person.prototype.getName = function(a,b) { 
     return this.name + " " + a + " " + b; 
}

var reader = new Person('John Smith');

reader.getName = function() {
   // Apply and Call trigger the function and provide a return value

   // Also observe the different approaches to accessing the 'getName' prototype
   var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
   console.log("Apply: " + baseName);

   var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy"); 
   console.log("Call: " + baseName);

   // Bind produces a function which can be invoked
   var baseName = Person.prototype.getName.bind(this, "is a", "boy"); 
   console.log("Bind: " + baseName());
}

reader.getName();
/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy
*/

Here is an example that showcases the usage of the 'valueForThis' parameter:

Array.prototype.push = function(element) {
   /*
   This is a native code snippet* that utilizes the 'this' keyword      
   this.insert(element);
   */
}
var array = [];
array.push(1);
array.push.apply(array, [2, 3]);
Array.prototype.push.apply(array, [4, 5]);
array.push.call(array, 6, 7);
Array.prototype.push.call(array, 8, 9);
//[1, 2, 3, 4, 5, 6, 7, 8, 9] 

**Additional information: *

The function Call() accepts arguments separated by commas, for instance:

.call(scope, arg1, arg2, arg3)

On the other hand, apply() takes an array of arguments, like this:

.apply(scope, [arg1, arg2, arg3])

Check out more examples of how to use these methods here:

According to information provided on Function.prototype.apply() in MDN docs :

The apply() function invokes a specified function with a given this value and arguments provided as an array (or an array-like object).

Syntax

fun.apply(thisArg, [argsArray])

As per the details available in MDN docs about Function.prototype.call() :

The call() method calls a specified function with a given this value and individual arguments.

Syntax

fun.call(thisArg[, arg1[, arg2[, ...]]])

Referring to Function.apply and Function.call in JavaScript blog post :

Apply() and call() are almost similar, except that apply() requires an array as the second parameter which represents the arguments for the target method.

Here is a code snippet for demonstration :

var doSomething = function() {
    var arr = [];
    for(i in arguments) {
        if(typeof this[arguments[i]] !== 'undefined') {
            arr.push(this[arguments[i]]);
        }
    }
    return arr;
}

var output = function(position, obj) {
    document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>';
}

output(1, doSomething(
    'one',
    'two',
    'two',
    'one'
));

output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [
    'one',
    'two',
    'two',
    'one'
]));

output(3, doSomething.call({one : 'Steven', two : 'Jane'},
    'one',
    'two',
    'two',
    'one'
));

For more details, visit this Fiddle link.

Check out this brief blog post I wrote:

let objA = { name : "objA" },
objB = { name : "objB" };

function executeFunction(argument1, argument2){
    console.log(this.name, argument1, argument2);
}

//using call method
executeFunction.call(objA, "Alice", "Bob");
//output: objA Alice Bob

//using apply method
executeFunction.apply(objB, ["Carol", "David"]);
//output: objB Carol David

//using traditional method
executeFunction("Eve", "Frank");
//output: undefined Eve Frank

One key distinction is that the call() method requires passing in individual arguments, whereas the apply() method takes in a single array of arguments.

One important distinction to note is that call() requires passing the function arguments individually, while apply() necessitates passing the function arguments in an array format.

Explanation:

The methods call() and apply() can be found in the Function.prototype. This means that every function object has access to these methods through the prototype chain. Both call() and apply() allow you to execute a function while explicitly specifying the value of the this keyword.

The key distinction between call() and apply() lies in how arguments are passed into them. In both cases, the first argument determines the value of this, but the way additional arguments are handled differs:

• When using call(), arguments are passed in individually starting from the second argument.
• On the other hand, with apply(), arguments need to be provided as an array.

Illustration:

let obj = {
  val1: 5,
  val2: 10
}

const summation = function (val3, val4) {
  return this.val1 + this.val2 + val3 + val4;
}

console.log(summation.apply(obj, [2 ,3]));
// Using apply requires passing arguments as an array


console.log(summation.call(obj, 2, 3));
// call allows individual arguments

When are these functions useful?

Managing the value of this can be challenging in JavaScript, as it is determined when a function is executed rather than when it is defined. Utilizing call() and apply() can help enforce the correct binding of this. For instance:

var name = 'unwantedGlobalName';

const obj = {
  name: 'Willem',
  sayName () { console.log(this.name); }
}

let copiedMethod = obj.sayName;
// Storing the function in a variable

copiedMethod();
// Results in unwantedGlobalName being logged due to window context

copiedMethod.call(obj);
// By utilizing call, we ensure the correct context and log Willem

Understanding the distinction between call and apply methods:

CALL: When calling a function with arguments provided individually. If you are aware of the specific arguments to pass or no arguments need to be passed, opt for call.

APPLY: Invoking a function with arguments supplied as an array. Apply is suitable when uncertain about the number of arguments to pass.

A major benefit of using apply over call is the flexibility it offers in modifying the passed array without altering the number of arguments needed.

In terms of performance, there is not a significant difference. However, call tends to be slightly faster than apply due to the evaluation process of an array in apply method.

One key distinction lies in the way call and apply handle arguments in JavaScript. When using call, you can alter the scope and pass parameters normally; on the other hand, apply allows you to invoke a function with an array of arguments. Despite this difference, both methods serve a similar purpose within your code.

Although the syntax for both call() and apply() functions appears nearly identical, the crucial disparity is that call() requires individual argument values while apply() necessitates a single array containing all arguments.

While the utilization may appear quite similar, there are specific scenarios where either call() or apply() would be preferred. A noteworthy example is demonstrated below, showcasing how to find the minimum and maximum numbers in an array by leveraging the apply method from MDN:

// finding min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// utilizing Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// This behaves similarly to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers)

The primary contrast lies in the approach to passing arguments:

Call:

function.call(thisArg, arg1, arg2, ...);

Apply:

function.apply(thisArg, [argsArray]);

Adding a straightforward example to elaborate on a well-written response by flatline, in order to make it more beginner-friendly.

func.call(context, args1, args2 );   // passing arguments as comma-separated values

func.apply(context, [args1, args2]); // passing arguments as an array

We are also utilizing the "Call" and "Apply" methods for altering the reference as illustrated in the code snippet below:

let Emp1 = {
  name: 'X',
  getEmpDetail: function(age, department) {
    console.log(`Name: ${this.name}    Age: ${age}    Department: ${department}`)
  }
}

Emp1.getEmpDetail(23, 'Delivery')

// Changing "this" using the first approach
let Emp2 = {
  name: 'Y',
  getEmpDetail: Emp1.getEmpDetail
}

Emp2.getEmpDetail(55, 'Finance')

// Changing "this" using "Call" and "Apply"
let Emp3 = {
  name: 'Emp3_Object',
}

Emp1.getEmpDetail.call(Emp3, 30, 'Admin')

// The reference is now switched from **Emp1 to Emp3** object
// It will now display "Name =  Emp3_Object" since it is pointed to the Emp3 object
Emp1.getEmpDetail.apply(Emp3, [30, 'Admin'])

The distinction between these two approaches lies in the way parameters are passed.

Remembering "A for array and C for comma" can be a useful memory aid.

Utilizing both call and apply serves the purpose of setting the correct this value when a function is executed. The key distinction between the two is that call requires n+1 arguments, with 1 being this and the remaining being 'n' arguments. On the other hand, apply only necessitates two arguments - one for this and the other for an argument array.

An advantage I find in using apply over call is the ease of delegating a function call to another function without much complexity;

function sayHello() {
  console.log(this, arguments);
}

function hello() {
  sayHello.apply(this, arguments);
}

var obj = {name: 'my name'}
hello.call(obj, 'some', 'arguments');

Notice how effortlessly we were able to delegate from hello to sayHello using apply, a task that would be trickier to accomplish with call.

Let me provide some additional information.

These pair of function calls are nearly identical:

func.call(context, ...args); // utilizing spread operator to pass an array as a list

func.apply(context, args);   // similar to using apply

The main discrepancy lies in:

• The spread operator ... enables the passing of iterable args as a list for calling.
• The apply method only accepts array-like arguments.

In essence, these function calls complement each other. Where an iterable is needed, call is suitable; where an array-like structure is expected, apply fits the bill.

For objects that possess attributes of both being iterable and array-like, such as a legitimate array, either method could technically be employed. However, apply is likely to be more efficient since many JavaScript engines internally optimize it more effectively.

While both call and apply achieve the same outcome, there is a scenario where only apply can be used, not call. This situation arises when you need to facilitate inheritance and call the constructor.

Below is a function that enables the creation of classes with support for extending other classes as well.

function createClass( attributes ) {
    var ctor = attributes['constructor'] || function(){}
    var Super = attributes['extends'];
    var Class = function () {
                 // In this context, 'call' won't work, only 'apply' can!!!
                 if(Super)
                    Super.apply(this,arguments);  
                 ctor.apply(this,arguments);
                }
     if(Super){
        Class.prototype = Object.create( Super.prototype );
        Class.prototype.constructor = Class;
     }
     Object.keys(attributes).forEach( function(prop) {
           if(prop!=='constructor' && prop!=='extends')
            Class.prototype[prop] = attributes[prop];
     });
   return Class; 
}

//Usage
var Vehicle = createClass({
             constructor: function(name){
                         this.name=name;
                        },
             displayName: function() {
                     return this.name;
                   }
          });
//We have a Vehicle class now
 var vehicleInstance=new Vehicle('Toyota');
vehicleInstance.displayName();// Returns Toyota

var Truck = createClass({
               constructor: function(model,power){
                     this.power=power;
                  },
               extends:Vehicle,
               displayPower: function() {
                    return this.power;
                  }
              });
//We have a Truck class now, which is a subclass of Vehicle
var truck=new Truck('Ford XYZ',3.2);
truck.displayName();//Returns Ford XYZ
truck.displayPower();// Returns 3.2

The call() method triggers a function using a specified this context and additional parameters separated by commas.

object.someMethod.call(someObject, arguments)

The apply() function operates similarly to call, but it accepts an array of arguments as the second parameter.

object.someMethod.apply(someObject, arrayOfarguments)

var car  = {  
  name: "Reno",
  country: "France",
  showBuyer: function(firstName, lastName) {
    console.log(`${firstName} ${lastName} just purchased a ${this.name} from ${this.country}`);
  }
}

const firstName = "Bryan";
const lastName = "Smith";

car.showBuyer(firstName, lastName); // Bryan just bought a Reno from France

const obj = { name: "Maserati", country: "Italy" };

car.showBuyer.call(obj, firstName, lastName); // Bryan Smith just bought a Maserati from Italy

car.showBuyer.apply(obj, [firstName, lastName]); // Bryan Smith just bought a Maserati from Italy

When using the apply() method, arguments are called in array form, whereas with the call() method, arguments are passed individually as separate parameters.

In terms of performance, call is slightly faster than the apply() method due to its lack of array-arguments.

Opt for the apply() method when dealing with an array-like object or an actual array. Choose the call() method when you have a precise number of arguments to pass to the function.

apply() vs call()

These two methods come in handy when dealing with array-like objects or arrays.

const numbers = [1, 2, 3];
const sum = function(a, b, c) {
    return a + b + c;
};
const result = sum.apply(null, numbers); // Output: 6

call() difference

const greeting = function(name) {
    return "Hello, " + name + "!";
};
const message = greeting.call(null, "Js"); // Output: "Hello, Js!"

The first argument (thisValue) for both is null since we are not using it to define the context (this) of the functions. However, you can pass a specific object if necessary.