JavaScript call(), apply(), bind()

call() Method

Execute immediately with specific context

The call() method invokes a function immediately while explicitly setting the this context. Arguments are passed individually, making it ideal when you know the exact parameters beforehand.

Syntax

functionName.call(thisContext, arg1, arg2, ...)

Example

const person1 = {
  name: "Alice",
  age: 25
};

const person2 = {
  name: "Bob", 
  age: 30
};

function introduce(greeting, profession) {
  return `${greeting}! I'm ${this.name}, 
  ${this.age} years old, and I'm a ${profession}.`;
}

// Using call() to set 'this' context
introduce.call(person1, "Hello", "Developer");
// "Hello! I'm Alice, 25 years old..."

introduce.call(person2, "Hi", "Designer");
// "Hi! I'm Bob, 30 years old..."

Key Points

Executes the function immediately
First parameter sets the this context
Remaining parameters passed as individual arguments
Perfect for method borrowing between objects

Use when: You know arguments beforehand

apply() Method

Execute with array of arguments

Similar to call(), but accepts arguments as an array. This is particularly useful when working with dynamic argument lists or when you need to spread an array of values as function parameters.

Syntax

functionName.apply(thisContext, [arg1, arg2, ...])

Example

function calculateSum(a, b, c) {
  console.log(`${this.name} calculates: 
  ${a} + ${b} + ${c} = ${a + b + c}`);
  return a + b + c;
}

const calculator = {
  name: "SuperCalculator"
};

const numbers = [10, 20, 30];

// Using apply() with array
calculateSum.apply(calculator, numbers);
// "SuperCalculator calculates: 60"

// Practical: Finding max in array
const nums = [5, 2, 9, 1, 7];
Math.max.apply(null, nums); // 9

Key Points

Executes the function immediately
Second parameter must be an array of arguments
Ideal when arguments are already in array form
Can use null for thisContext when not needed

Use when: Arguments are in an array

bind() Method

Create bound function for later use

Unlike call() and apply(), bind() doesn't execute immediately. Instead, it returns a new function with a permanently bound this context. Perfect for callbacks and event handlers.

Syntax

const boundFunction = functionName.bind(thisContext, arg1, arg2, ...)

Example

const user = {
  name: "John",
  greet: function(message) {
    return `${message}, I'm ${this.name}!`;
  }
};

// Problem: losing 'this' context
const greetFunc = user.greet;
// greetFunc("Hello") // Error: this.name undefined

// Solution: bind()
const boundGreet = user.greet.bind(user);
boundGreet("Hello"); // "Hello, I'm John!"

// Partial application
function multiply(a, b, c) {
  return `${this.name}: ${a}×${b}×${c}=${a*b*c}`;
}

const mathTeacher = { name: "Ms. Smith" };
const multiplyByTwo = multiply.bind(mathTeacher, 2);

multiplyByTwo(3, 4); // "Ms. Smith: 2×3×4=24"

Key Points

Returns a new function (doesn't execute immediately)
Permanently binds the this context
Supports partial application (preset arguments)
Essential for event handlers and callbacks

Use when: You need a function for later execution

Interactive Playground

Experiment with all three methods in real-time. Click the tabs to switch between methods and see the output instantly.

JavaScript

Console Output

// Click "Run Code" to see output...

Quick Comparison

Method	Execution	Arguments	Returns	Best For
call()	Immediate	Individual (arg1, arg2...)	Function result	Known arguments, method borrowing
apply()	Immediate	Array [arg1, arg2...]	Function result	Dynamic arrays, variadic functions
bind()	Delayed	Individual (preset possible)	New function	Callbacks, event handlers, partials

Pro Tips

Modern Alternative

With ES6, use the spread operator instead of apply(): func(...args) is cleaner than func.apply(null, args).

Arrow Functions

Arrow functions don't have their own this, so bind() won't work on them. Use regular functions when you need to rebind context.

Performance

call() is slightly faster than apply() because it avoids array iteration overhead. Use it when performance matters.