Understanding this, call(), apply(), and bind() in JavaScript

JavaScript gives developers a lot of flexibility, but one thing that confuses almost everyone at first is this.

In this article, we’ll understand:

• What this means in JavaScript

• How this behaves in functions and objects

• What does call(), apply(), and bind() do and their differences

• Simple real-world examples

Let’s make it simple.

What is this in JavaScript?

The easiest way to understand the concept of this. Just remember one thing:

This refers to the object that is calling the function.

In simple words, whoever calls the function becomes this for the function.

Inside Object

Example:

const user = {
    name: 'Rahul',
    greet: function (){
        console.log(`Hello ${this.name}`)
    }
}

user.greet();

Here, user calls the greet function.

So, this -> user for greet function.

const person1 = {
    name: "Rahul",
    greet() {
        console.log(`Hello ${this.name}`);
    }
};

const person2 = { name: "Aman", };

person2.greet = person1.greet;

person2.greet();

Here, as the person2.greet is initialized with person1.greet.

But still, as the person2 is calling the greet function, the output will be 'Hello Aman'

Inside Normal Functions

Let’s understand with a regular function example.

function show() { 
    console.log(this);
}

show();

In browsers, this usually prints window, because the show function is directly called from the global object (i.e. window for browser).

But in strict mode:

"use strict"

function show() {
    console.log(this);
}

show();

The output becomes undefined.

That’s because strict mode prevents JavaScript from automatically attaching this to the global object.

What is call() in JavaScript?

call() lets you manually decide what this should be.

Syntax:

functionName.call(thisValue, arg1, arg2)

functionName.call(thisValue, arg1, arg2)

Example:

const user = { name: "Ashish", }

function greet(city) {
    console.log(`Hello \({this.name} from \){city}`) 
}

greet.call(user, "Delhi")

Output: Hello Ashish from Delhi

Here what happened, you can see the greet is not attached to the user object, but if I want to pass the user as a context to the greet, we can use call().

call() is commonly used for:

• Function borrowing

• Reusing methods

• Setting custom this

Example:

const person1 = {
    name: "Rahul",
    introduce() {
        console.log(`Hi, I am ${this.name}`)
    },
};

const person2 = { name: "Aman" };

person1.introduce.call(person2);

Output: Hi, I am Aman

Here, person2 borrowed the method from person1.

What is apply() in JavaScript?

apply() works almost exactly like call().

The only difference is that apply() it accepts arguments as an array.

Syntax:

functionName.apply(thisValue, [args]);

Example:

const user = { name: "Ashish" };

function greet(city, country) {
    console.log(`Hello \({this.name} from \){city}, ${country}`) 
}

greet.apply(user, ["Delhi", "India"]);

Output: Hello Ashish from Delhi, India

call() vs apply()

Both do the same thing:

• They immediately invoke the function

• They manually set this

The difference is only in how arguments are passed.

• call:

  greet.call(user, "Delhi", "India");
  

• apply:

  greet.apply(user, ["Delhi", "India"]);
  

What is bind() in JavaScript?

bind() is slightly different than call and apply.

Instead of immediately calling the function, bind() returns a new function.

Syntax:

functionName.bind(thisValue);

Example:

const user = { name: "Ashish" };

function greet() {
    console.log(`Hello ${this.name}`);
}

const newFunction = greet.bind(user);

newFunction();

Output: Hello Ashish

Why is bind() Useful?

bind() is useful when you want to:

• Store a function

• Pass functions around

• Keep the correct this

Example:

const user = {
    name: "Ashish",
    greet() {
        console.log(this.name) 
    },
}

const button = user.greet;

button();

This may lose the correct this.

Using bind():

const button = user.greet.bind(user)

button()

Now this always points to user.

Real Difference Between call, apply, and bind

Method	Calls Function Immediately	Arguments Style	Returns New Function?
call	Yes	Separate arguments	No
apply	Yes	Array of arguments	No
bind	No	Separate arguments	Yes

Simple Visual Understanding

Function → Caller Relationship:

• this

  user.greet()
  
  caller -> user
  this -> user
  

• call

  greet.call(user, 'Pankaj', 26);
  
  Caller manually set to user2
  this = user2
  

• apply

  greet.apply(user, ["Delhi", "India"])
  
  Caller manually set to user2, arguments passed as array
  this = user2
  

• bind

  const fn = greet.bind(user)
  
  Creates a new function
  this = user
  

Final Thoughts

Understanding this is one of the biggest turning points in JavaScript.

Once you understand the concept of who is calling the function, how call(), apply() , and bind() control this

JavaScript becomes much easier to read and debug.

The best way to master these concepts is to practice small examples repeatedly.

Start simple, experiment with different callers, and everything will begin to click naturally.

Follow the series to learn more about Javascript.