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

In JavaScript, the value of this depends on how a function is called, not where the function is defined.

What this means in JavaScript (simple explanation)

In JavaScript, this inside the Global Execution Context refers to the Global Object (window in browsers, global in Node.js).

this inside normal functions

During Default Invocation of a regular function in Non-Strict mode, this inside the function refers to Global Object.

During Default Invocation of a regular function in Strict mode, this inside the function refers to undefined.

this inside objects

When a regular function is a method of an object. During the Method Invocation of the function, this inside the function refers to the object, no matter the mode (strict or non-strict).

const person = {
    name: "Jaspreet Sharma",
    age: 21,
    greet(){
        return `Hi! my name is \({this.name}. I am \){this.age} years old.`;
    },
};

console.log(person.greet()); // "Hi! my name is Jaspreet Sharma. I am 21 years old."

External Invocation

In order to change the reference of this inside a regular function to point to an external object, we use External Invocation methods.

Methods of External Invocation are:

• call()

• apply()

• bind()

What call() does

call() takes the object that should become this as its first argument, followed by the arguments required by the function.

this inside the regular function starts pointing to the object passed as the argument inside the call() method.

function cookDish(ingredient, style)
{
    return `\({this.name} prepares \){ingredient} in ${style} style!`;
}

const sharmaKitchen = {name: "Sharma jis Kitchen"};

console.log(cookDish.call(sharmaKitchen, "Paneer and Spices", "Muglai")); // "Sharma jis Kitchen prepares Paneer and Spices in Muglai style!"

What apply() does

apply() takes the object that should become this as its first argument, and an array of arguments required by the function as its second argument.

this inside the regular function starts pointing to the object passed as the argument inside the apply() method.

function cookDish(ingredient, style)
{
    return `\({this.name} prepares \){ingredient} in ${style} style!`;
}

const guptaKitchen = {name: "Gupta jis Kitchen"};

const guptaOrder = ["Chole Kulche", "Punjabi Dhaba"];

console.log(cookDish.apply(guptaKitchen, guptaOrder));
// "Gupta jis Kitchen prepares Chole Kulche in Punjabi Dhaba style!"

What bind() does

bind() takes the object that should become this as its first argument, followed by any arguments that should be pre-filled.

this inside the regular function starts pointing to the object passed as the argument inside the bind() method.

bind() returns a new function with this permanently bound to the provided object.

We can also pass the arguments required by the function as arguments of the returned function.

function reportDelivery(location, status)
{
    return `\({this.name} at \){location}: ${status}`;
}

const deliveryBoy = {name: "Ranveer"};

const bindReport = reportDelivery.bind(deliveryBoy, "Mohali", "Delivered");

console.log(bindReport()); // "Ranveer at Mohali: Delivered"

Difference between call, apply, and bind

call() and apply() only differ in the way they accept arguments required by the function.

call() accepts arguments required by the function as comma-separated values.

apply() accepts the arguments required by the function as an array.

bind() differs from call() and apply() because it does not execute the function immediately.
Instead, it returns a new function with this bound.