Day 10: JavaScript Call, Apply & Bind - Mastering Function Borrowing 🚀

Introduction ✨

In JavaScript, functions are first-class citizens, meaning they can be passed as arguments, returned from other functions, and even borrowed by different objects. This is where call(), apply(), and bind() methods come into play. These methods allow us to borrow functions from one object and use them with another object. 🔥

In this post, we’ll understand these methods with real-world use cases and examples. 🏆

---

1️⃣ Understanding call(), apply(), and bind() 🤔

These three methods are used to manipulate the this keyword inside a function.

1.1) call() Method 📞

The call() method invokes a function and allows you to pass arguments one by one.

Syntax:

functionName.call(thisArg, arg1, arg2, ...);

Example:

const person1 = {
    name: "Lokesh",
    greet: function(age) {
        console.log(`Hello, my name is ${this.name} and I am ${age} years old.`);
    }
};

const person2 = { name: "Mukesh" };
person1.greet.call(person2, 25);
// Output: Hello, my name is Mukesh and I am 25 years old.

📌 Here, call() changes the this context from person1 to person2. ✅

---

1.2) apply() Method 🎯

The apply() method is similar to call(), but instead of passing arguments individually, you pass them as an array.

Syntax:

functionName.apply(thisArg, [arg1, arg2, ...]);

Example:

const numbers = {
    max: function(a, b, c) {
        return Math.max(a, b, c);
    }
};

console.log(numbers.max.apply(null, [10, 20, 30]));
// Output: 30

📌 Best used when arguments are already in an array format. 💡

---

1.3) bind() Method 🔗

The bind() method does not invoke the function immediately. Instead, it returns a new function with the specified this value.

Syntax:

const newFunction = functionName.bind(thisArg, arg1, arg2, ...);

Example:

const user = {
    name: "Lokesh",
    greet: function() {
        console.log(`Hello, I am ${this.name}`);
    }
};


const greetUser = user.greet.bind(user);
greetUser();
// Output: Hello, I am Lokesh

📌 Best used when you need to maintain the this context for later execution. ⚡

---

Real-World Use Cases 🌍

1️⃣ Borrowing Methods 🔄

const car = { brand: "Toyota" };
const bike = { brand: "Yamaha" };

function showBrand() {
    console.log(this.brand);
}
showBrand.call(car);  // Output: Toyota
showBrand.call(bike); // Output: Yamaha

2️⃣ Finding Maximum in an Array 🔢

const numbers = [12, 45, 78, 34];
console.log(Math.max.apply(null, numbers)); // Output: 78

3️⃣ Setting this in Event Listeners 🖱️

class Button {
    constructor(label) {
        this.label = label;
    }

    handleClick() {
        console.log(`Button ${this.label} clicked`);
    }
}

const btn = new Button("Submit");
document.querySelector("button").addEventListener("click", btn.handleClick.bind(btn));

📌 Using bind() ensures this refers to the correct object inside event listeners. 🎯

---

Conclusion 🏁

• call() – Calls the function immediately, passing arguments one by one.

• apply() – Calls the function immediately, passing arguments as an array.

• bind() – Returns a new function, preserving the this context.

Understanding these methods will make you a better JavaScript developer, especially when working with function borrowing, event listeners, and array manipulations. 🚀