Understanding call, apply and bind methods in Javascript

Jahid Hasan — Fri, 08 May 2026 04:47:14 +0000

Three little methods. One big idea: you control what this points to.

Every time you write a function in JavaScript, there's a hidden element — the this keyword. Usually, it works fine, but when you extract a method or pass it as an event listener, this can point somewhere unexpected, causing confusing bugs.

call, apply, and bind are the tools that help manage that hidden element. Let's explore with an example involving a bus company 🚌.

The Example Setup

Consider Purbasha Paribahan, a local bus company modeled as an object with a book method to record passenger reservations.

const purbasha = {
  busName: 'Purbasha Paribahan',
  busCode: 'PB',
  bookings: [],
  book: function(busNum, passengerName) {
    console.log(
      `${passengerName} has booked a seat on ${this.busName} with bus ${this.busCode}${busNum}.`
    );
    this.bookings.push({ bus: `${this.busCode}${busNum}`, passengerName });
  }
};

Calling the function normally works perfectly:

purbasha.book(12, 'Sumon');

Output: Sumon has booked a seat on Purbasha Paribahan with bus PB12.

Inside book, this refers to purbasha — exactly as intended. But things get interesting when a rival enters the scene.

A competing company, Royal Express, needs similar booking functionality. Repeating the method isn't ideal, so we introduce our three heroes.

const royal = {
  busName: 'Royal Express',
  busCode: 'RE',
  bookings: []
};

Method 1: `call` — Invoke Immediately with Arguments as a List

First, get the book function separately, then use .call() to invoke it with this set to the desired object, passing arguments individually.

const book = purbasha.book; // separate function reference

book.call(royal, 45, 'Tanvir');

Output: Tanvir has booked a seat on Royal Express with bus RE45.

What's happening?
call runs book immediately, manually setting this to royal. It's like: "Use this function but treat it as if it belongs to royal".

Argument	Description
1st	Object to assign `this`
2nd, 3rd, ...	Function arguments

Method 2: `apply` — Same as `call`, Arguments in an Array

apply is similar but takes arguments as an array, useful when data is already in an array.

const passengerData = [23, 'Mahfuz'];

book.apply(purbasha, passengerData);

Output: Mahfuz has booked a seat on Purbasha Paribahan with bus PB23.

Tip: With ES6+, you can use the spread operator with call instead:
book.call(purbasha, ...passengerData);

Method	Argument Passing
call	Individually listed
apply	In an array

Method 3: `bind` — Create a New Function with `this` Set

bind doesn't run the function immediately. Instead, it returns a new function with this permanently set, which you can call later.

const bookRE = book.bind(royal); // new function

bookRE(56, 'Mustak'); // call the new function

Output: Mustak has booked a seat on Royal Express with bus RE56.

Using `bind` for Partial Application

bind is especially useful for partial application, where you preset some arguments.

// preset `this` and bus number 56
const bookRE56 = book.bind(royal, 56);

bookRE56('Robin');
bookRE56('Rafi');

Output:

Robin has booked a seat on Royal Express with bus RE56.
Rafi has booked a seat on Royal Express with bus RE56.

Note: Partial application is creating specialized functions by presetting some arguments.

Common Pitfall: Event Callbacks

Using object methods as event handlers often causes this to break. Here's an example:

purbasha.buses = 100;
purbasha.buyBus = function() {
  this.buses++;
  console.log(this.buses);
};

// ❌ Wrong — don't do this
document.querySelector('.buy')
  .addEventListener('click', purbasha.buyBus);

Click, and you'll see NaN, not 101. That's because in event callbacks, this refers to the DOM element (the button), which lacks a buses property, leading to undefined++, resulting in NaN.

Rule of thumb: When passing methods as callbacks, this can lose its original context.

To fix, bind the method:

// ✅ Correct — bind `purbasha` as 'this'
document.querySelector('.buy')
  .addEventListener('click', purbasha.buyBus.bind(purbasha));

Now, this inside buyBus always refers to purbasha, no matter the event source.

Quick Reference

Method	Executes?	Argument Passing	Use Case
`call`	Yes, immediately	Individual args	One-off with specific `this`
`apply`	Yes, immediately	Arguments in array	When data is in an array
`bind`	No — returns a new func	Pre-set args optional	Callbacks, partials

That's it! Understanding these methods as different ways to specify "this" makes them less mysterious and more natural to use.

Questions? Comments? Feel free to ask!

*Inspired by Jonas Schmedtmann's JavaScript course on Udemy.

DEV Community: Jahid Hasan

Understanding call, apply and bind methods in Javascript

The Example Setup

Method 1: call — Invoke Immediately with Arguments as a List

Method 2: apply — Same as call, Arguments in an Array