# The Magic of this, call(), apply(), and bind() in JavaScript If you spend enough time writing JavaScript, you will eventually run into a keyword that causes a lot of headaches for beginners: `this`. In English, we use pronouns like "he", "she", or "it" so we don't have to constantly repeat someone's name. If I say, "John is reading; **he** loves books," you know exactly who "he" is. In JavaScript, `this` acts just like a pronoun. It is a shortcut reference to an object. But here is the trick: just like the word "he" changes depending on who you are talking about, the value of `this` changes depending on **who is calling the function**. In this blog, we will understand exactly what `this` means, how it behaves inside objects and normal functions, and how we can control it using three powerful JavaScript methods: `call()`, `apply()`, and `bind()`. ## What `this` Means in JavaScript The simplest way to understand `this` is to ask yourself one question whenever you see a function being executed: **"Who is calling this function?"** Whatever object is standing "to the left of the dot" when the function is called, that object is `this`. Let's look at how it behaves in two different scenarios. ### 1\. `this` Inside Objects When you put a function inside an object, it is called a **method**. Inside a method, `this` refers to the object that owns the method. ```javascript let user = { name: "Suprabhat", greet: function() { // "this" refers to the 'user' object console.log("Hello, my name is " + this.name); } }; // WHO is calling the greet function? The 'user' object! user.greet(); // Output: Hello, my name is Suprabhat ``` Because `user` is to the left of the dot (`user.greet()`), `this.name` translates directly to `user.name`. ### 2\. `this` Inside Normal Functions What happens if a function is just floating around on its own, not attached to any specific object you created? ```javascript function sayHello() { console.log(this); } // WHO is calling sayHello? No one specifically! sayHello(); ``` When you call a normal function without an object, `this` defaults to the global object (which is the `window` object in a web browser). Usually, we don't want to mess with the global object, which is why `this` is mostly used inside our own objects. ## Borrowing Functions: `call()`, `apply()`, and `bind()` Sometimes, you have a method on one object, but you want to use it on a completely different object. You want to temporarily change "who is calling the function" so that `this` points to exactly what you want. JavaScript gives us three special tools to do this: `call()`, `apply()`, and `bind()`. ### What `call()` Does The `call()` method allows you to borrow a function and instantly execute it, while explicitly telling JavaScript exactly what `this` should point to. You can also pass basic arguments to the function one by one, separated by commas. **Example:** ```javascript let person1 = { name: "Suprabhat" }; let person2 = { name: "Piyush" }; function introduce(city, country) { console.log("I am " + this.name + " from " + city + ", " + country); } // We use call() to make 'this' point to person1 introduce.call(person1, "UP", "India"); // Output: I am Suprabhat from UP, India // Now we use call() to make 'this' point to person2 introduce.call(person2, "Bihar", "India"); // Output: I am Piyush from Bihar, India ``` ### What `apply()` Does The `apply()` method does the exact same thing as `call()`: it executes the function immediately and changes what `this` points to. The **only difference** is how you pass the arguments. Instead of passing them one by one separated by commas, `apply()` expects you to pass all arguments inside a single **Array**. **Example:** ```javascript let person = { name: "Rith" }; function introduce(city, country) { console.log("I am " + this.name + " from " + city + ", " + country); } // We use apply() and pass the arguments in an array: ["West Bengal", "India"] introduce.apply(person, ["West Bengal", "India"]); // Output: I am Rith from West Bengal, India ``` *Things to remember:* ***A****pply uses* ***A****rrays.* ***C****all uses* ***C****ommas.* ### What `bind()` Does Both `call()` and `apply()` run the function immediately. But what if you want to set the `this` value, but save the function to run *later*? This is where `bind()` comes in. The `bind()` method does **not** execute the function right away. Instead, it creates and returns a **brand new function** with `this` permanently locked to the object you chose. **Example:** ```javascript let user = { name: "Suprabhat" }; function sayHi() { console.log("Hi, it's " + this.name); } // bind() creates a new function where 'this' is permanently locked to 'user' let boundFunction = sayHi.bind(user); // We can run it later whenever we want! boundFunction(); // Output: Hi, it's Suprabhat ``` ### Summary: Difference Between call, apply, and bind To keep things clear, here is a simple comparison table of the three methods:

Method

What it does

How to pass arguments

Executes immediately?

call()

Changes this

Comma-separated (arg1, arg2)

Yes

apply()

Changes this

As an Array ([arg1, arg2])

Yes

bind()

Changes this

Comma-separated (arg1, arg2)

No (Returns a new function)

## Conclusion Understanding `this` unlocks a whole new level of JavaScript programming. Just remember the golden rule: `this` is determined by **who is calling the function**. And if you ever need to manually change who is calling it, you now have `call`, `apply`, and `bind` in your toolkit to borrow methods and control your code.