The Captain’s Armband: Mastering this, call, apply, and bind 🪄

In our coding journey so far, we’ve built the squad and learned the tactics. But now, we face a mystery that confuses even the most seasoned managers: Who is currently in control?

In JavaScript, that question is answered by the keyword this. When things get complicated, we use the "Magic Trio"-call(), apply(), and bind() -to take control of the situation.

1. What is this? (The "Who is Calling?" Rule)

The simplest way to understand this is to ask: "Who is calling the function right now?"

Think of this like a Captain’s Armband. The person wearing the armband is the one this refers to.

• In an Object: If you have a player object, this refers to that specific player.

• In a Normal Function: By default, this refers to the "Global" object (the whole stadium), which isn't very helpful.

const ronaldo = {
    name: "Cristiano Ronaldo",
    shout: function() {
        console.log(`${this.name} says SIUUUUU!`);
    }
};

ronaldo.shout(); // Output: Cristiano Ronaldo says SIUUUUU!
// Here, 'this' is Ronaldo because he called the function.

---

2. Borrowing Skills: call() and apply()

Imagine Cristiano Ronaldo has a specific training drill (a method). Another player, like Jude Bellingham, wants to "borrow" that drill. We use call or apply to make that happen.

call() - The Direct Pass

call() allows you to invoke a function and tell it exactly who this should be. You pass arguments one by one.

function train(skill, intensity) {
    console.log(`\({this.name} is training \){skill} at ${intensity}% intensity.`);
}

const bellingham = { name: "Jude Bellingham" };

// We "call" the function for Bellingham
train.call(bellingham, "Heading", 95); 
// Output: Jude Bellingham is training Heading at 95% intensity.

apply() - The Team Bus

apply() is exactly like call(), but it takes arguments as an Array. Think of it like putting all your tactical notes into one suitcase (the array).

// Using apply with an array of arguments
train.apply(bellingham, ["Free Kicks", 90]);

---

3. bind() - The Long-Term Contract

Unlike call and apply, bind() does not run the function immediately. Instead, it creates a brand new function that is permanently "bound" to a specific person.

This is like signing a player to a long-term contract - no matter where they go, they know who their manager is.

const bellinghamTrain = train.bind(bellingham, "Dribbling", 85);

// Later in the game...
bellinghamTrain(); // It remembers Bellingham is 'this'!

---

4. The Comparison Table: Knowing Your Tools

Feature	call()	apply()	bind()
Execution	Immediate	Immediate	Returns a NEW function
Arguments	Individually (arg1, arg2)	As an Array ([arg1, arg2])	Individually
Main Use	Borrowing methods	Borrowing with many args	Event listeners / Callbacks

---

🏆 Daily Drill: Method Borrowing ⚽

Head to your console and try this magic trick:

1. The Master Object: Create an object cr7 with a method that uses this.name.

2. The Rookie: Create a simple object rookie with just a name property.

3. The Loan Deal: Use .call() to make the rookie use cr7's method.

4. The Multi-Training: Use .apply() to pass an array of two skills to the method.

5. The Contract: Use .bind() to create a permanent version of the method for the rookie and call it later.

Which one do you think is more useful: call or bind? Let's discuss in the comments!