JavaScript's "Secret Sauce": Understanding this, Call, Apply, and Bind

What exactly is this?

In JavaScript, the keyword this is like a finger pointing at something. The simplest way to remember it is: this refers to "who" is calling the function.

Imagine you are at a party. If you say, "I am drinking water," the word "I" refers to you. But if your friend says the same sentence, "I" refers to them. this works the exact same way in code. It changes depending on who is talking (or calling the function).

1. this inside Normal Functions

If you just create a regular function and call it, this usually points to the "Global" window (your browser).

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

sayHello(); // In a browser, this will show the "Window" object

2. this inside Objects

When you put a function inside an object (we call this a method), this points to the object itself. It’s like the object is saying, "Hey, look at my data!"

const person = {
  name: "Rahul",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Output: Hello, my name is Rahul

In the example above, this.name is the same as saying person.name.

Controlling this: Call, Apply, and Bind

Sometimes, we want to "borrow" a function from one object and use it for another. This is where call, apply, and bind come in.

What is call()?

call() lets you call a function and tell it exactly what this should be. You pass arguments one by one, separated by commas.

function introduce(city, country) {
  console.log("Hi, I'm " + this.name + " from " + city + ", " + country);
}

const user1 = { name: "Anjali" };

introduce.call(user1, "Mumbai", "India"); 
// Output: Hi, I'm Anjali from Mumbai, India

What is apply()?

apply() is almost exactly like call(). The only difference? It takes arguments as an Array.

Pro-tip: Think Apply = Array.

const user2 = { name: "John" };

// We use square brackets [] for the array
introduce.apply(user2, ["New York", "USA"]); 
// Output: Hi, I'm John from New York, USA

What is bind()?

bind() is a bit different. It doesn't call the function immediately. Instead, it creates a new function that you can save and use later. It "binds" the object to the function forever.

const user3 = { name: "Sara" };

const sarsIntro = introduce.bind(user3, "London", "UK");

// Nothing happens yet... until we call it!
sarsIntro(); // Output: Hi, I'm Sara from London, UK

Quick Comparison Table

Feature	call()	apply()	bind()
Execution	Calls it immediately	Calls it immediately	Saves it for later
Arguments	One by one (comma)	In an Array []	One by one (comma)
Returns	Result of the function	Result of the function	A new function