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

Understand this, call, apply and bind and their role in JS

UpdatedMarch 15, 2026

•3 min read•View as Markdown

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

Satpalsinh Rana

Frontend Developer 💻 | Fueled by curiosity and Tea ☕ | Always learning and exploring new technologies.

Part of seriesJavaScript

Comments

Join the discussion

No comments yet. Be the first to comment.

JavaScript

Part 15 of 24

Master JavaScript from the ground up with a structured, easy-to-follow learning path designed for serious developers. This series starts with core fundamentals like variables, data types, and control flow, then gradually moves into deeper topics such as functions, scope, prototypes, asynchronous programming, and how the JavaScript engine works internally. Each lesson focuses on clarity and real understanding. You will learn not only how to write JavaScript, but why it behaves the way it does. Concepts are explained using simple examples, practical use cases, and clean coding patterns that reflect real-world development.

Up next

OOP in JavaScript

Understanding Object-Oriented Programming 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.

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

Comments

JavaScript

OOP in JavaScript

More from this blog

AI 101

Linux from my Eyes

JWT Authentication

Storing Uploaded Files and Serving Them in Express

Handling File Uploads in Express with Multer

this

`this` inside Objects

`this` inside Normal Functions

Controlling `this`: Call, Apply, and Bind

`call()`

`apply()`

`bind()`

Let's Connect! 🚀

Command Palette

Comments

JavaScript

OOP in JavaScript

More from this blog

this

this inside Objects

this inside Normal Functions

Controlling this: Call, Apply, and Bind

call()

apply()

bind()

Let's Connect! 🚀

`this` inside Objects

`this` inside Normal Functions

Controlling `this`: Call, Apply, and Bind

`call()`

`apply()`

`bind()`