The Magic of this, call(), apply(), and bind() in JavaScript

this

The simplest way to think about this is: "Who is calling the function?"

It is a keyword that refers to the context (the object) that is currently executing the code. It acts like a pronoun in English instead of saying "Satpal is coding", you say "He is coding."

this inside Objects

When you use this inside a method of an object, it refers to the object itself.

const dev = {
  name: "Satpal",
  greet: function() {
    console.log(`Hi, I am ${this.name}`);
  }
};

dev.greet(); 

Here, this is dev because dev is the one calling greet().

this inside Normal Functions

In a regular function (not a method of an object), this defaults to the Global Object (window in browsers). If you use strict mode, it will be undefined.

Controlling this: Call, Apply, and Bind

Sometimes, you want to borrow a method from one object and use it with another. This is where call, apply, and bind come in.

call()

Calls a function immediately and allows you to pass in the this context explicitly, followed by arguments one by one.

function intro(city, tech) {
  console.log(`\({this.name} from \){city} loves ${tech}.`);
}

const user = { name: "Satpal" };
intro.call(user, "Ahmedabad", "Angular"); 
// Output: Satpal from Ahmedabad loves Angular.

apply()

Exactly like call(), but it takes arguments as an Array. Mnemonic: Apply = Array.

intro.apply(user, ["Ahmedabad", "NodeJS"]);

bind()

Instead of calling the function immediately, bind() returns a new function with the this context fixed. You can call it later.

const boundIntro = intro.bind(user, "Ahmedabad", "TypeScript");
boundIntro(); // Calls the function later

Method	Invocation	Arguments	Returns
call()	Immediate	Comma-separated	Result of function
apply()	Immediate	Array []	Result of function
bind()	Later	Comma-separated	A new function

Example

const laptop = {
  brand: "MacBook",
  showInfo: function(ram, storage) {
    console.log(`\({this.brand} with \){ram}GB RAM and ${storage}GB SSD`);
  }
};

const desktop = { brand: "Custom PC" };

// 1. Borrowing with call()
laptop.showInfo.call(desktop, 32, 1024);

// 2. Borrowing with apply()
laptop.showInfo.apply(desktop, [16, 512]);

// 3. Storing with bind()
const showDesktop = laptop.showInfo.bind(desktop);
showDesktop(64, 2048);

Understanding this is what separates a beginner from an intermediate JavaScript developer. While this can seem "magical", it always follows the simple rule: look at what is to the left of the dot when the function is called.

Let's Connect! 🚀

I’m currently deep-diving into the JavaScript, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

• Connect on LinkedIn: Satpalsinh's Profile

• Follow my Blog: blogs.satpal.cloud

Keep coding and keep building.