JavaScript call() vs apply(): Difference, Use Cases, and Examples

By the end of this page, you will understand how call() and apply() invoke a function, how they set this, how they pass arguments differently, and when each one is useful in JavaScript code.

call() and apply() are both methods available on JavaScript functions. They let you invoke a function immediately while also controlling what this should refer to inside that function.

The core difference is how arguments are passed:

• call(thisArg, arg1, arg2, arg3) passes arguments one by one.
• apply(thisArg, [arg1, arg2, arg3]) passes arguments as an array or array-like object.

Why this matters

In JavaScript, this depends on how a function is called. Sometimes you want to borrow a function from one object and use it with another object, or call a function when your arguments already exist in an array. That is where call() and apply() are useful.

Important idea

If a function takes no arguments, then these two are effectively the same in everyday use:

func.call();
func.apply();

Both invoke the function immediately.

Performance note

In modern JavaScript, performance differences between call() and apply() are usually negligible for normal code. You should choose based on , not micro-optimizations.

Think of a function as a worker who needs two things before starting:

1. Who they are working for → this is this
2. What materials they are given → these are the arguments

call() says:

"Work for this person, and here are your materials one by one."

apply() says:

"Work for this person, and here is a single box containing all your materials."

So the job is the same. The only real difference is how the materials are handed over.

• call() = separate arguments
• apply() = one array of arguments

Basic syntax

fn.call(thisArg, arg1, arg2, arg3);
fn.apply(thisArg, [arg1, arg2, arg3]);

• thisArg is the value that this should refer to inside the function.
• The remaining values are the function arguments.

Example 1: No arguments

function greet() {
  console.log("Hello world!");
}

greet.call();
greet.apply();

Both lines do the same thing here because:

• no custom this is needed
• no arguments are being passed

Example 2: Setting this

function introduce() {
  console.log(`Hi, I am ${this.name}`);
}

const person = { :  };

introduce.(person);
introduce.(person);

Consider this example:

function showMessage(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const user = { name: "Lina" };

showMessage.call(user, "Hello", "!");
showMessage.apply(user, ["Hello", "!"]);

What happens with call()

showMessage.call(user, "Hello", "!");

Step by step:

1. JavaScript looks at the function showMessage.
2. call() invokes it immediately.
3. this inside showMessage becomes user.
4. The first argument becomes greeting = "Hello".

1. Reusing a method with another object

const person1 = {
  name: "Sam",
  sayName() {
    console.log(this.name);
  }
};

const person2 = { name: "Rita" };

person1.sayName.call(person2); // Rita

This is called function borrowing.

2. Calling a function with array data

function multiply(a, b, c) {
  return a * b * c;
}

const values = [2, 3, 4];

multiply.apply(null, values); // 24

Useful when arguments come from:

• API responses
• form data
• parsed CSV rows
• dynamic configuration arrays

3. Converting array-like data in older patterns

Historically, apply() was often used with array-like objects such as .

In real projects, call() and apply() appear less often than basic function calls, but they still show up in useful patterns.

1. Method borrowing

Developers sometimes reuse built-in methods on array-like values.

const arrayLike = { 0: "a", 1: "b", length: 2 };
const result = Array.prototype.join.call(arrayLike, "-");

console.log(result); // a-b

2. Delegating arguments

A wrapper function may forward all received arguments.

function wrapper() {
  return originalFunction.apply(this, arguments);
}

In modern JavaScript this is usually written as:

function () {
   originalFunction.(, ...args);
}

1. Forgetting that call() and apply() invoke immediately

Some beginners think these methods just prepare a function. They do not. They run it right away.

function sayHi() {
  console.log("Hi");
}

sayHi.call(); // runs now
sayHi.apply(); // runs now

2. Passing array arguments to call() by mistake

Broken code:

function add(a, b) {
  return a + b;
}

console.log(add.call(null, [2, 3])); // wrong

Why it fails:

• a becomes [2, 3]
• b becomes undefined

vs normal function call

Quick rules

• call() and apply() both invoke a function immediately.
• Both let you choose the value of this.
• Main difference: how arguments are passed.

Syntax

fn.call(thisArg, arg1, arg2, arg3);
fn.apply(thisArg, [arg1, arg2, arg3]);

Use call() when

• you know the arguments individually
• you want a straightforward function invocation with a custom this

fn.call(obj, 1, 2, 3);

Use apply() when

• your arguments already exist in an array
• you are working with array-like objects in older code

fn.apply(obj, [1, 2, 3]);

Modern alternatives

What is the main difference between call() and apply() in JavaScript?

The main difference is argument passing:

• call() passes arguments one by one
• apply() passes them as an array or array-like object

Do call() and apply() both change this?

Yes. Both let you set the this value for the function call.

Is call() faster than apply()?

In modern JavaScript engines, any performance difference is usually too small to matter in normal application code.

When should I use apply()?

Use apply() when your arguments are already in an array or array-like object.

When should I use call()?

Use call() when you want to pass arguments individually and set this explicitly.

• this keyword — call() and apply() are mainly about controlling this.
• bind() — similar to call() and apply(), but returns a new function instead of invoking immediately.
• Arrow functions — important because their this behaves differently.
• Spread syntax (...) — a modern alternative to many apply() use cases.
• Rest parameters — useful for collecting arguments into an array.
• Function borrowing — a common pattern that uses call().
• Array-like objects — often involved in older apply() patterns.
• Method invocation vs function invocation — helps explain how this is determined.