Understanding call() and apply() in JavaScript

The previous blog discussed functions in JavaScript. Functions are a type of object, and I mainly focused on their properties. In this blog, I'll talk about their methods: call and apply.

call()

Syntax

call(thisArg)
call(thisArg, arg1)
call(thisArg, arg1, arg2,  …, argN)

The call() method in JavaScript allows you to explicitly specify the value of this within a function. This is particularly useful when a function relies on properties of an object and you need to set what this should refer to during the function's execution.

Let's take a look at this example:

function employee() {
    console.log(`${this.name} works in the ${this.department} department`);
}

const john = {
    name: "John",
    department: "sales"
}

employee(john);

This code won't work because the employee() function can't identify what this refers to (e.g. this.name).

To specify what the employee() function should reference, we can use the call() method. With this method, this is bound to the object we pass as the first argument, so the code below works correctly.

function employee() {
    console.log(`${this.name} works in the ${this.department} department.`);
}

const john = {
    name: "John",
    department: "sales"
}

employee.call(john); // John works in the sales department.

const jane = {
    name: "Jane",
    department: "human resources"
}

employee.call(jane); // Jane works in the human resources department.

apply()

Syntax

apply(thisArg)
apply(thisArg, argsArray)

The apply() method works similarly to call(), with the main difference being how arguments are passed. In call(), we pass arguments individually, while in apply(), we pass them as an array or array-like object. To clarify, an array-like object is a key-value pair structure that includes a length property but does not have array methods.

MDN provides a clear and easy-to-understand explanation, along with a great example of the difference between call() and apply():

Note: This function is almost identical to call(), except that the function arguments are passed to call() individually as a list, while for apply() they are combined in one object, typically an array — for example, func.call(this, "eat", "bananas") vs. func.apply(this, ["eat", "bananas"]).

MDN

Here's an example that modifies the previous code:

function employee( department, position ) {
    console.log(`${this.name} works in the ${department} department as a ${position}.`);
}

const john = {
    name: "John",
}
const jane = {
    name: "Jane",
}

employee.call(john, "sales", "manager"); 
// John works in the sales department as a manager.
employee.call(jane, "human resources", "senior assistant");  
// Jane works in the human resources department as a senior assistant.

employee.apply(john, ["sales", "manager"]);  
// John works in the sales department as a manager.
employee.apply(jane, ["human resources", "senior assistant"]);  
// Jane works in the human resources department as a senior assistant.

thisArg
If you pass null or undefined as the thisArg, the this value will default to

• the global object in non-strict mode
• undefined in strict mode

apply() vs Spread Syntax
Before ES6 introduced the spread syntax, apply() was used to pass an array of arguments to a function.

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);
const min = Math.min.apply(null, numbers);

console.log(max); // 7
console.log(min); // 2

MDN

Here, null is used as the this value (It doesn't refer to any though).
With the apply() method, it is the equivalent of:

const max = Math.max(5, 6, 2, 3, 7);
const max = Math.min(5, 6, 2, 3, 7);

Now, we have the spread syntax (...), we can simply write:

const numbers = [5, 6, 2, 3, 7];

const max = Math.max(...numbers);
const max = Math.min(...numbers);

Functions in JavaScript can be reusable and used dynamically. However, it is important to ensure that the correct values are referenced when a function is executed.

call(): allows you to specify the this value and passes arguments individually

apply(): allows you to specify the this value and passes an array or an array-like object

Understanding and using those methods are essential.