Day 15 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-06-10 18:40:56

Hey reader👋 Hope you are doing well😊
In the last post we have seen about objects in JavaScript. In this post we are going to know about `this` keyword in JavaScript, we are going to start from very basic and take it to advanced level.
So let's get started🔥

## `this` Keyword

In JavaScript, the `this` keyword is a special identifier that refers to the context in which the current code is executing. Its behavior can vary depending on the mode (strict or non-strict) and the type of function call.

## Different Contexts for `this` 

**Global Context (or default binding):**

In the global execution context (outside of any function), `this` refers to the global object. In a browser, the global object is `window`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53sopjy7mrdr4vxxmndi.png)

**`this` in a Function (Default)**

In a function, the global object is the default binding for `this`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkx3q6mmtw5ml6b0yw39.png)

**`this` in event handlers**

In HTML event handlers, `this` refers to the HTML element that received the event.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4101g5qlcgj606hvu8j3.png)

**Object Method Binding**

When a function is called as a method of an object, `this` refers to the object the method is called on.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/updeu4xkmxqq5cgz4wqd.png)

**Arrow Functions**

Arrow functions do not have their own `this` context. Instead, `this` is lexically inherited from the surrounding non-arrow function or global context.
In regular functions the `this` keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions the `this` keyword always represents the object that defined the arrow function.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q8u0mtio1yfi6msa3pj.png)
As here the function is called when the button is clicked so here `this` repersents the button.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n41to8e05idumicdaytb.png)
In this case `this` refers to the owner of function i.e. window object.

**Explicit Function Binding**

**`call()` Method-:**

The `call()` method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qelmkjcod1bteei3vy8j.png)
This example calls the fullName method of person, using it on person1.

**`apply()` Method-:**

The `apply()` method is similar to the `call()` method.The difference is-: the `call()` method takes arguments separately whereas the `apply()` method takes arguments as an array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lur79ab8y5gupo2emrs.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/726yj3win7v3aiwe3jdb.png)

**`bind()` Method-:**

With the `bind()` method, an object can borrow a method from another object.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmkot4xdy4hmzynefrmd.png)
Here the member object borrows the fullname method from the person object.

Sometimes the `bind()` method has to be used to prevent losing `this`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rip4wyuputch1asufnf3.png)
Inside the `setTimeout` callback, `this` no longer refers to obj. Instead, it refers to the global object (window in browsers) in non-strict mode or is undefined in strict mode.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kru23veozl8ejfhxdthg.png)

The value of `this` can be lost in callbacks because the context in which the callback is executed might differ from the context in which it was defined. This happens due to how JavaScript handles function calls and the default binding of `this`. To address this, you can use `bind`, arrow functions, or store `this` in a variable to preserve the intended context.

Understanding how `this` works is crucial for writing correct and predictable JavaScript code, especially in the context of object-oriented programming, event handling, and functional programming paradigms.

I hope you have understood this blog. Don't forget to follow me and leave some reaction for this post.
Thankyou 🩵