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

One of the biggest challenges in JavaScript is controlling the value of:

this

JavaScript provides three built-in methods:

call()

apply()

bind()

These methods allow us to manually control the value of this.

Why Do We Need call(), apply(), and bind()?

Consider:

const user = {
    name: "Venu"
};

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

Calling:

greet();

Output:

undefined

Because:

this is not pointing to user

Solution:

greet.call(user);

Output:

Venu
Overview
Method	Executes Immediately	Returns Function
call()	Yes	No
apply()	Yes	No
bind()	No	Yes
call()

The call() method invokes a function immediately and allows us to specify the value of this.

Syntax:

functionName.call(thisArg, arg1, arg2);

Example:

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

const user = {
    name: "Venu"
};

greet.call(user);

Output:

Venu
call() with Parameters
function introduce(city, country) {

    console.log(
        `${this.name} lives in ${city}, ${country}`
    );

}

const user = {
    name: "Venu"
};

introduce.call(
    user,
    "San Antonio",
    "USA"
);

Output:

Venu lives in San Antonio, USA
call() Flow
Function
    |
    v
call()
    |
    v
Assign this
    |
    v
Execute Function
apply()

apply() works exactly like call().

Difference:

Arguments are passed as an array

Syntax:

functionName.apply(
    thisArg,
    [arg1, arg2]
);
apply() Example
function introduce(city, country) {

    console.log(
        `${this.name} lives in ${city}, ${country}`
    );

}

const user = {
    name: "Venu"
};

introduce.apply(
    user,
    ["San Antonio", "USA"]
);

Output:

Venu lives in San Antonio, USA
call() vs apply()
call()
introduce.call(
    user,
    "Texas",
    "USA"
);
apply()
introduce.apply(
    user,
    ["Texas", "USA"]
);
bind()

Unlike call and apply:

bind does NOT execute immediately

It returns a new function.

Syntax:

const fn =
functionName.bind(thisArg);
bind() Example
function greet() {

    console.log(this.name);

}

const user = {
    name: "Venu"
};

const boundFunction =
greet.bind(user);

boundFunction();

Output:

Venu
bind() Flow
Function
    |
    v
bind()
    |
    v
Create New Function
    |
    v
Execute Later
Why bind() Is Useful

Problem:

const user = {

    name: "Venu",

    greet() {
        console.log(this.name);
    }

};

const fn = user.greet;

fn();

Output:

undefined
Solution Using bind()
const fn =
user.greet.bind(user);

fn();

Output:

Venu
Real World Example

Button Click Handler

class User {

    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(this.name);
    }

}

const user =
new User("Venu");

const handler =
user.greet.bind(user);

Without bind:

this may be lost
Function Borrowing

One object can use another object's method.

const employee = {
    name: "Venu"
};

const manager = {
    name: "John"
};

function greet() {
    console.log(this.name);
}
Borrow Using call()
greet.call(employee);

Output:

Venu
Borrow Using apply()
greet.apply(manager);

Output:

John
Borrow Using bind()
const managerGreeting =
greet.bind(manager);

managerGreeting();

Output:

John
Practical Example
const user = {
    firstName: "Venu",
    lastName: "Reddy"
};

function fullName() {

    return `${this.firstName} ${this.lastName}`;

}

Using call:

console.log(
    fullName.call(user)
);

Output:

Venu Reddy
Common Interview Example
function multiply(a,b) {
    return a*b;
}

call:

multiply.call(null,2,3);

apply:

multiply.apply(null,[2,3]);

Output:

6
Common Mistakes
Confusing bind() with call()

Wrong:

const fn =
greet.bind(user);

console.log(fn);

Output:

Function Returned

Function is not executed yet.

Using apply() Without Array

Wrong:

introduce.apply(
    user,
    "Texas",
    "USA"
);

Correct:

introduce.apply(
    user,
    ["Texas","USA"]
);
Forgetting Function Invocation
const fn =
greet.bind(user);

Need:

fn();
Best Practices

Use:

call()

when arguments are known individually.

Use:

apply()

when arguments already exist in an array.

Use:

bind()

when callback execution happens later.

Use bind for:

Event Handlers
React Class Components
Timers
Callback Functions
Interview Questions
What is call()?

Invokes a function immediately with a specified this.

What is apply()?

Invokes a function immediately with a specified this and array arguments.

What is bind()?

Returns a new function with a fixed this.

Difference Between call() and apply()?
call()
Arguments separated by commas

apply()
Arguments passed as array
Difference Between call() and bind()?
call()
Executes immediately

bind()
Returns function
What is Function Borrowing?

Using one object's method with another object using call, apply, or bind.

Cheat Sheet
call()
------
Execute Immediately

fn.call(obj,arg1,arg2)

apply()
-------
Execute Immediately

fn.apply(obj,[arg1,arg2])

bind()
------
Returns New Function

const f = fn.bind(obj)

Execution
---------
call  -> Immediate

apply -> Immediate

bind  -> Later

Usage
-----
Function Borrowing
Event Handlers
Callback Functions
this Binding
Summary

call(), apply(), and bind() allow developers to manually control the value of this.

Key Concepts:

call() executes immediately
apply() executes immediately with array arguments
bind() returns a new function
Useful for function borrowing
Prevents losing this
Commonly used in callbacks and event handlers

Mastering these methods is essential for understanding:

this Keyword
Functions
Event Handling
React
JavaScript Internals