Introduction

call and apply both invoke a function while explicitly setting its this value. The difference is only in how the function arguments are passed: call takes them one by one, while apply takes them as an array or array-like object.

What They Both Do

Suppose you have a function that depends on this:

1function introduce(language, years) {
2  return `Hi, I'm ${this.name}. I use ${language} for ${years} years.`;
3}
4
5const person = { name: "Alice" };

Normally, calling introduce() directly would leave this undefined or bound differently depending on the context. call and apply let you control that.

call: Arguments Passed Individually

With call, arguments come after the this value:

const message = introduce.call(person, "JavaScript", 5);
console.log(message);

This is equivalent to saying:

• run introduce
• use person as this
• pass "JavaScript" and 5 as normal positional arguments

call is convenient when you already have the arguments separately.

apply: Arguments Passed as an Array

With apply, the second argument is one array or array-like collection:

const args = ["JavaScript", 5];
const message = introduce.apply(person, args);
console.log(message);

This is useful when the arguments are already stored in a list-like structure and you want to spread them into the function call.

That is the whole mechanical difference:

• 'call(thisArg, arg1, arg2, ...)'
• 'apply(thisArg, [arg1, arg2, ...])'

A Classic Example with Math.max

apply used to be a common way to pass an array into functions such as Math.max:

const numbers = [3, 5, 7, 2, 8];
const maxValue = Math.max.apply(null, numbers);
console.log(maxValue);

In modern JavaScript, the spread operator is usually clearer:

const maxValue = Math.max(...numbers);
console.log(maxValue);

That is why apply is less prominent in everyday code than it used to be.

They Are Also About Borrowing Methods

Another use case is method borrowing. For example, you can use an array method on an array-like object by controlling this.

1function listArguments() {
2  return Array.prototype.slice.call(arguments);
3}
4
5console.log(listArguments("a", "b", "c"));

Here slice is borrowed from Array.prototype, and call makes it run against the array-like arguments object.

This pattern appears less often today because many older array-like problems are easier to solve with newer JavaScript features, but it is still a useful concept for understanding call and apply.

bind Is Related but Different

People often compare call, apply, and bind together. bind does not invoke the function immediately. It returns a new function with this pre-bound.

const boundIntroduce = introduce.bind(person, "JavaScript", 5);
console.log(boundIntroduce());

So:

• 'call invokes now'
• 'apply invokes now'
• 'bind returns a new function for later'

Understanding that distinction prevents a lot of confusion.

Common Pitfalls

• Thinking call and apply differ in this behavior. They do not; they differ in argument passing.
• Using apply when you already have separate arguments, which makes the code harder to read.
• Forgetting that modern spread syntax often replaces old apply patterns more cleanly.
• Confusing bind with immediate invocation tools such as call and apply.
• Assuming this rebinding matters in arrow functions the same way it does in normal functions. Arrow functions do not have their own this.

Summary

• 'call and apply both invoke a function with an explicit this value.'
• 'call takes arguments one by one.'
• 'apply takes the arguments as an array or array-like object.'
• Modern JavaScript often replaces some apply use cases with the spread operator.
• 'bind is related, but it creates a new function instead of calling immediately.'