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

In this article we'll learn about one of most important topics of JavaScript. These are the topics that help you crack the interview and write good and efficient code as a developer. We'll be discussing `this` keyword, call(), apply() and bind() with simple explanation and examples.

## `this` keyword in JavaScript

When learning JavaScript, one thing that confuses many beginners is the `this` keyword. At first it looks mysterious. But once you understand the idea, it becomes much easier. Let’s break it down step by step.

Always remember that `this`always refers to the current context. By context I mean who is calling "this".

Let's take simple a non-tech example

If Alice says:

```plaintext
I am a developer
```

“I” refers to **Alice**.

If Bob says:

```plaintext
I am a developer
```

“I” refers to **Bob**.

JavaScript works in the same way.

## `this` inside a normal function

In a normal function, `this` usually refers to the global object. In browsers, the global object is `window`. And in nodejs the global object is different.

Example:

```javascript
function showThis() {
  console.log(this);
}

showThis();
```

Output (in browser):

```javascript
Window {...}
```

Why?

Because no object called the function, so JavaScript defaults to the global object. Here it is very important to note that where your are running the code. Because the environment decides the current context and as I mentioned earlier that `this` points to the current context.

## `this` inside an object

When a function is inside an object, `this` refers to **that object**.

Example:

```javascript
const person = {
  name: "Alex",
  greet: function () {
    console.log("Hi, my name is " + this.name);
  }
};

person.greet();
```

Output:

```plaintext
Hi, my name is Alex
```

Why?

Because `person` called the function.

So:

```javascript
this = person
```

## What does `call()` do?

`call()` lets you borrow a function and choose what `this` should be.

Imagine your friend has a car, and you say:

“Can I use your car for a minute?”

That’s what `call()` does.

Example:

```javascript
function introduce() {
  console.log("Hello, I am " + this.name);
}

const user = {
  name: "Shreya"
};

introduce.call(user);
```

Output:

```plaintext
Hello, I am Shreya
```

Here we manually set `this` to `user`. It is a really cool concept.

## What does `apply()` do?

`apply()` is almost the same as `call()`. The only difference is how arguments are passed. `apply()` takes array as its arguments .

Example:

```javascript
function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

const user = {
  name: "Ram"
};

introduce.apply(user, ["Delhi", "India"]);
```

Output:

```plaintext
Ram lives in Delhi, India
```

## What does `bind()` do?

`bind()` creates a new function with a fixed `this` value.

Think of it like permanently assigning ownership.

Example:

```javascript
function greet() {
  console.log("Hello " + this.name);
}

const user = {
  name: "Amany"
};

const newFunction = greet.bind(user);

newFunction();
```

Output:

```plaintext
Hello Amany
```

`bind()` does not run immediately. It returns a new function.

## Easy way to remember

Think of them like borrowing tools.

`call()` :

Use the tool right now

`apply()` :

Use the tool right now but give items in a box (array)

`bind()` :

Take the tool home and use later

## Final Thoughts

Understanding `this`, `call()`, `apply()`, and `bind()` is very important in JavaScript because they control how functions behave with different objects.

At first it may look confusing, but remember this simple rule: `this` depends on who is calling the function.